<template>

    <div class="subscriptionOptions">

        <div class="subscriptionOptions__status">

            <template v-if="url">

                <a
                        :href="url"
                        @click.prevent="open = !open"
                        v-html="label"
                ></a>

            </template>

            <template v-else>

                <p v-html="label"></p>

            </template>


        </div> <!-- .subscriptionOptions__status -->

        <div
                class="subscriptionOptions__options"
                :class="[loading ? 'isLoading' : '']"
                v-show="open"
        >

            <div class="subscriptionOptions__intro">
                Subscribe monthly and save on this item!
            </div> <!-- .subscriptionOptions__intro -->

            <div class="subscriptionOptions__buttons">

                <button type="button" class="button buttonAlt" @click.prevent="enableSubscription">
                    Subscribe Now
                </button>

                <button type="button" class="buttonText" @click.prevent="disableSubscription">
                    No Thanks
                </button>

            </div> <!-- .subscriptionOptions__buttons -->

        </div> <!-- .subscriptionOptions__options -->

    </div> <!-- .subscriptionOptions -->

</template>

<script>

    import axios from 'axios';

    export default {

        props: {
            label: {
                type: [String, Boolean],
                default() {
                    return '';
                }
            },
            url: {
                type: [String, Boolean],
                default() {
                    return false;
                }
            },
            links: {
                type: [Object, Array, Boolean],
                default() {
                    return {
                        accept_url: '',
                        decline_url: ''
                    };
                }
            }
        },

        data() {
            return {
                loading: false,
                open: false
            }
        },

        methods: {

            enableSubscription() {
                this.request(this.links.accept_url);
            },

            disableSubscription() {
                this.request(this.links.decline_url);
            },

            request(url) {

                const vm = this;
                this.loading = true;

                // Strip the ajax.php suffix to get the base subscription action URL, appending '/true' for AJAX mode
                const path = url.replace('/shop/checkout/ajax.php', '') + '/true';

                axios.get(path, {
                    maxRedirects: 0,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function (response) {

                    const currentPath = window.location.pathname;

                    EventBus.$emit('receiveBasketUpdate', true);

                    if (currentPath == '/shop/checkout/basket.php') {
                        window.location = '/shop/checkout/basket.php';
                    } else {
                        vm.loading = false;
                        vm.open = false;
                    }

                }).catch(function(e) { console.error(e); });

            }

        }
    }

</script>

<style lang="less">

    @import '@site/css/variables.less';
    @import '@core/css/mixins.less';
    @import '@site/../default/css/base/mixins.less';


    .subscriptionOptions {

        &__options {

            margin: 16px 0;
            border-top: 1px solid rgba(0,0,0,0.08);
            border-bottom: 1px solid rgba(0,0,0,0.08);
            padding: 16px 0;

            opacity: 1;
            transition: opacity 200ms linear;

            &.isLoading {
                opacity: 0.5;
                pointer-events: none;
                transition: opacity 200ms linear;
            }

        }

        &__intro {
            .rems(16);
            line-height: 1.2em;
            color: @text_color;
            margin: 0 0 16px;

        }

        &__buttons {

            display: flex;
            gap: 12px;
            flex-wrap: wrap;

            @media all and (max-width: 1120px) {
                flex-wrap: wrap;
                gap: 4px;
            }

            .button, .buttonAlt, .buttonText {
                .rems(14);
                line-height: 1.2em;
                padding: 8px 16px;
                margin: 0;
                flex: 0 0 100%;

                @media all and (max-width: 1120px) {
                    flex: 0 0 100%;
                }
            }

            .buttonText {
                padding-left: 12px;
                padding-right: 12px;
            }
        }
    }

</style>
