<template>

    <div class="subscriptionActions">

        <div class="subscriptionActions__buttons subscriptionActions__buttonGroup">

            <template v-if="hasFailedPayment">

                <a
                        :href="payUrl"
                        class="btn"
                        v-if="payUrl.length"
                >
                    Pay
                </a>

            </template>

            <template v-else-if="canBePaused">

                <template v-if="isActive">
                    <button
                            type="button"
                            @click="submitAction(pauseUrl)"
                            class="btn btn-secondary"
                            v-if="pauseUrl.length"
                    >
                        Pause
                    </button>

                </template>

                <template v-else-if="isPaused">

                    <button
                            type="button"
                            @click="submitAction(activateUrl)"
                            class="btn btn-green"
                            v-if="activateUrl.length"
                    >
                        Activate
                    </button>

                </template>

            </template>

            <template v-if="!isCancelled">

                <button
                        type="button"
                        v-if="!isCancelled && cancelUrl.length"
                        :disabled="cancelling"
                        @click.prevent="cancelling = true"
                        class="btn btn-red"
                >
                    Cancel
                </button>


                <a
                        :href="editUrl"
                        class="btn btn-secondary"
                        v-if="isEditable && editUrl.length"
                >
                    Edit
                </a>


            </template>

            <template v-else>

                <button
                        type="button"
                        :disabled="true"
                        class="btn btn-red"
                >
                    Cancel
                </button>

            </template>

        </div> <!-- .subscriptionActions__buttons -->

        <div class="subscriptionActions__cancelReasons" v-show="cancelling">

            <div class="row">

                <label for="cancelReason">Please let us know why you would like to cancel this subscription:</label>

                <div class="selectWrap">

                    <select  
                            v-model="cancelReason" 
                            id="cancelReason"
                            name="cancelReason"
                    >
                        
                        <option value="">Select a reason</option>
                        
                        <option 
                                v-for="(reason, key) in cancelReasons" 
                                :key="'reason' + key"
                                v-text="reason"
                                :value="reason"
                        ></option>
                        
                    </select>

                </div> <!-- .selectWrap -->

                <div class="subscriptionActions__textBox" v-show="isOther">

                    <div class="row">

                        <label
                                for="otherReason"
                        >
                            Please provide more information:
                        </label>

                        <textarea
                                name="otherReason"
                                id="otherReason"
                                v-model="otherReason"
                        ></textarea>

                    </div> <!-- .row -->

                </div> <!-- .subscriptionActions__textbox -->

            </div> <!-- .row -->

        </div> <!-- .subscriptionActions__cancelReasons -->

        <div class="subscriptionActions__cancelConfirm subscriptionActions__buttonGroup" v-show="cancelling">

            <button
                    type="button"
                    class="btn btn-red"
                    :disabled="(!cancelReason.length && !isOther) || (isOther && !otherReason.length)"
                    @click.prevent="submitCancel()"
            >
                Cancel Subscription
            </button>

            <button
                    type="button"
                    class="btn btn-green"
                    @click.prevent="cancelling = false"
            >
                Continue Subscription
            </button>

        </div> <!-- .subscriptionActions__cancelConfirm -->

    </div> <!-- .subscriptionActions -->

</template>

<script>

import axios from 'axios';

export default {

    props: {

        hasFailedPayment: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        payUrl: {
            type: [String],
            default() {
                return '';
            }
        },

        isPaused: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        canBePaused: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        pauseUrl: {
            type: [String],
            default() {
                return '';
            }
        },

        isActive: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        activateUrl: {
            type: [String],
            default() {
                return '';
            }
        },

        isCancelled: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        cancelUrl: {
            type: [String],
            default() {
                return '';
            }
        },

        isEditable: {
            type: [Boolean],
            default() {
                return false;
            }
        },

        editUrl: {
            type: [String],
            default() {
                return '';
            }
        },

        cancelReasons: {
            type: [Array, Object],
            default() {
                return [];
            }
        }

    },

    data() {

        return {

            cancelling: false,
            cancelReason: '',
            otherReason: ''

        }

    },

    computed: {

        isOther() {
            return this.cancelReason.toLowerCase() == 'other';
        },

        cancelReasonText() {

            if(this.cancelReason.toLowerCase() == 'other') {

                return this.otherReason;

            }else if(this.cancelReason.length) {

                return this.cancelReason;

            }

            return '';

        }
    },

    methods: {

        submitAction(url) {
            axios.post(url).then(() => {
                window.location.reload();
            }).catch((error) => {
                console.error('Action failed:', error);
            });
        },

        submitCancel() {
            const reason = this.cancelReasonText;
            if (reason.length && this.cancelUrl.length) {
                axios.post(this.cancelUrl, {
                    cancel_reason: reason
                }).then(() => {
                    window.location.reload();
                }).catch((error) => {
                    console.error('Cancel subscription failed:', error);
                });
            }
        }

    }

}
</script>

<style lang="less">

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


.subscriptionActions {
    
    width: 100%;
    padding: 16px 0;

    
    * {
        float: none !important;
        clear: both !important;
    }

    .row {

        margin: 0;

        label {
            float: none;
            clear: both;
            display: block;
            width: 100%;
        }

        textarea {
            float: none;
            clear: both;
            max-width: 450px;
            width: 100% !important;
        }
        
        select {
            width: 100% !important;
        }

    }

    &__textBox {
        padding: 12px 0 0 0;
    }

    .selectWrap {
        max-width: 450px;
    }

    .btn {
        margin: 0;
        font-size: 16px !important;
        line-height: 31px !important;
    }

    &__buttonGroup {
        display: flex;
        gap: 12px;

        @media @mobile {

            flex-direction: column;

        }

        .btn {

            @media @mobile {

                width: 100%;

            }

        }
    }

    &__cancelReasons {

        padding-top: 16px;
        margin-top: 16px;
        border-top: 1px solid @border_color;

        .row {

            margin-bottom: 12px;
            
            label {
                font-weight: normal;
                display: block;
                width: 100%;
                margin: 0 0 4px;
            }

        }
    }

    &__cancelConfirm {
        padding-top: 16px;
    }

}

</style>
