<template>

    <div class="subscriptionActions">

        <div class="subscriptionActions__buttons subscriptionActions__buttonGroup">

            <template v-if="hasFailedPayment">

                <a
                    :href="payUrl"
                    class="button"
                    v-if="payUrl.length"
                >
                    <i class="fas fa-credit-card"></i> Pay Now
                </a>

            </template>

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

                <template v-if="isActive">

                    <button
                        type="button"
                        @click="submitAction(pauseUrl)"
                        class="button buttonAlt"
                        v-if="pauseUrl.length"
                    >
                        <i class="fas fa-pause-circle"></i> Pause
                    </button>

                </template>

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

                    <button
                        type="button"
                        @click="submitAction(activateUrl)"
                        class="button"
                        v-if="activateUrl.length"
                    >
                        <i class="fas fa-play-circle"></i> Reactivate
                    </button>

                </template>

            </template>

            <template v-if="!isCancelled">

                <button
                    type="button"
                    v-if="!isCancelled && cancelUrl.length && canBeCancelled"
                    :disabled="cancelling"
                    @click.prevent="cancelling = true"
                    class="button buttonAlert"
                >
                    <i class="fas fa-times-circle"></i> Cancel
                </button>

                <a
                    :href="editUrl"
                    class="button"
                    v-if="isEditable && editUrl.length"
                >
                    <i class="fas fa-pen"></i> Edit
                </a>


            </template>

            <template v-else>

                <button
                        type="button"
                        :disabled="true"
                        class="button buttonAlert"
                        v-if="!isCancelled"
                >
                    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">

                    <chosen
                            :options="cancelReasons"
                            placeholder="Select a reason"
                            v-model="cancelReason"
                            class="no-chosen"
                            id="cancelReason"
                            name="cancelReason"
                    ></chosen>

                </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 && ((cancelReason.length && cancelReason != 'Other') || otherReason.length)">

            <button
                type="button"
                @click="submitCancel"
                class="button buttonAlert mainCancel"
                :disabled="(!cancelReason.length && !isOther) || (isOther && !otherReason.length)"
            >
                <i class="fas fa-times-circle"></i> Confirm Cancellation
            </button>

            <button
                    type="button"
                    class="button buttonSuccess"
                    @click.prevent="cancelling = false"
            >
                <i class="fas fa-arrow-left"></i> Keep Subscription
            </button>

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

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

</template>

<script>


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 [];
            }
        },

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

    },

    data() {

        return {

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

        }

    },

    methods: {

        submitAction(url) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;
            document.body.appendChild(form);
            form.submit();
        },

        submitCancel() {
            const reason = this.cancelReason === 'Other' ? this.otherReason : this.cancelReason;
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = this.cancelUrl;
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'cancel_reason';
            input.value = reason;
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        },

    },

    computed: {

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

        canBeCancelled() {
            if(this.hasFailedPayment) return true;
            if (!this.nextRenewalDate) return true;
            const renewalDate = new Date(this.nextRenewalDate);
            const today = new Date();
            const daysUntilRenewal = Math.ceil((renewalDate - today) / (1000 * 60 * 60 * 24));
            return daysUntilRenewal > 14;
        }
    }

}
</script>

<style lang="less">


    .subscriptionActions {

        .row {

            margin: 0 0 24px;

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

            textarea {
                float: none;
                clear: both;
                max-width: 450px;
            }

        }

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

        .selectWrap {
            max-width: 450px;
        }

        .button {

            .rems(16);
            line-height: 28px;
            margin: 0;
            padding: 4px 24px;

            &.buttonAlert {

                transition: color 200ms linear, background 200ms linear, border-color 200ms linear !important;

                &:hover, &:active, &:focus-visible {
                    transition: color 200ms linear, background 200ms linear, border-color 200ms linear !important;
                }

            }
        }

        &__buttonGroup {

            display: flex;
            gap: 12px;

            @media @mobile {

                flex-direction: column;

            }

            .button {

                @media @mobile {

                    width: 100%;

                }

            }

        }

        &__cancelReasons {

            padding-top: 16px;
            margin-top: 16px;
            border-top: 1px solid var(--border_color);


            .row {

                margin: 0 0 16px 0;

            }
        }

        &__cancelConfirm {
            padding-top: 16px;
        }

        .buttonAlert:not(.mainCancel) {
            margin-left: auto;
        }

    }

</style>
