<template>
    <div class="save-progress-popup-question" :class="[isProgressSaved ? 'progress-saved' : '']">
        <modal
            :ref="modalName"
            :headerText="modalHeaderText"
            suppressPageScroll
            :staticBackdrop="true"
            :onModalClosedCallback="onModalClosed"
            :footerButtonText="modalButtonText"
            @footer-button-event="saveProgress">
            <p class="modal-body-inner">{{ modalBodyText }}</p>
            <saveProgressQuestion
                ref="saveProgressQuestion"
                v-model="userInput"
                cmsWidgetName="SaveProgressPopupQuestionWidget"
                class="save-progress-popup-question" />
            <template v-slot:modal-footer-slot>
                <buttonMain
                    ref="skipButton"
                    type="button"
                    :buttonText="buttonText"
                    loaderColor="white"
                    :suppressLoader="true"
                    class="skip-button"
                    @click-event="closeModal" />
                <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
            </template>
            <alert
                class="my-4"
                v-if="isProgressSaved"
                cmsWidgetName="SaveProgressModalAlertWidget"
                alertClass="alert-success" />
        </modal>
    </div>
</template>

<script>
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
import modal from "@/digital-components/modal/modal";
import { storeActions } from "@/constants/store-actions.js";
import buttonMain from "@/ux-components/button-main/button-main";
import alert from "@/ux-components/alert/alert";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";

export default {
    name: "save-progress-popup-question",

    data() {
        return {
            userInput: "",
            isProgressSaved: false,
        };
    },
    mounted() {
        if (this.showSaveProgressPopup) this.modal.openModal();
    },
    unmounted() {
        // remove any modal effects before leaving page (e.g. user hits browser back button)
        this.modal.closeModal();
    },
    emits: ["close-save-progress-popup", "save-progress"], // <--- should remove oodles of warnings in dev tools
    props: {
        modelValue: Object,
        modalWidgetName: String,
        pageName: String,
        showSaveProgressPopup: Boolean,
    },
    computed: {
        buttonText() {
            return this.isProgressSaved
                ? "Close"
                : this.getCmsContent(this.modalWidgetName, "BodyText2");
        },
        modalHeaderText() {
            return this.getCmsContent(this.modalWidgetName, "HeaderText");
        },
        modalBodyText() {
            return this.getCmsContent(this.modalWidgetName, "BodyText");
        },
        modalButtonText() {
            return this.getCmsContent(this.modalWidgetName, "FooterText");
        },
        modalDisclaimerText() {
            return this.getCmsContent(this.modalWidgetName, "FooterText2");
        },
        modalName() {
            return this.modalWidgetName;
        },
        modal() {
            return this.$refs[this.modalName];
        },
    },
    methods: {
        closeModal() {
            this.modal.closeModal();
        },
        onModalClosed() {
            // send call to close popup
            this.$emit("close-save-progress-popup");
        },
        async saveProgress() {
            // save email address to store
            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);

            // send store call to send to new API (that triggers an email send)
            await saveQuote({ pageNameToLog: this.pageName });

            // hide save progress button; show success message alert
            this.isProgressSaved = true;

            // communicate to parent the new status
            this.$emit("save-progress-saved");
        },
    },

    components: {
        modal,
        buttonMain,
        saveProgressQuestion,
        alert,
    },
};
</script>

<style lang="scss">
.save-progress-popup-question {
    order: 2;
    margin-bottom: 1.5rem;

    .modal-header {
        padding-top: 1rem;

        .modal-title {
            padding-top: 4.25rem;
        }

        .modal-title::before {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 63 62'%3E%3Cpath fill='%23B3B4B5' d='M31.5 62c17.052 0 30.876-1.503 30.876-3.358 0-1.854-13.824-3.358-30.876-3.358S.624 56.788.624 58.642C.624 60.497 14.448 62 31.5 62Z' opacity='.4'/%3E%3Cpath fill='%23DA291C' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m33.358 52.715-4.574 4.573-24.192-24.2 4.491-4.491 24.275 24.118Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M58.408 13.402 55.61 30.469 33.356 52.715 9.083 28.597 31.411 6.269l17.067-2.797 9.93 9.93Z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M45.586 19.907a3.618 3.618 0 1 0 0-7.237 3.618 3.618 0 0 0 0 7.237Z'/%3E%3C/svg%3E");
            width: 3.875rem;
            height: 3.875rem;
            top: 2.5rem;
            left: calc(50% - 3.875rem / 2);
        }
    }

    .btn.btn-secondary.skip-button {
        order: 4;
        position: relative;
        color: $black;
        border: none;
        border-radius: 0.25rem;
        font-weight: 900;
        font-size: 0.875rem;
        text-align: center;
        display: inline-block;
        width: auto;
        height: auto;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
        line-height: 1rem;
        padding: 0 0 4px 0;
        margin: 0 auto 1.5rem auto;
        transition: all 150ms linear;
        background: none;
        @include media-breakpoint-up(md) {
            font-size: 1rem;
        }

        &:hover,
        &:active,
        &:focus {
            color: $blue-700;
            background: none;
            box-shadow: none;
        }
        &:focus-visible {
            outline: none;
            box-shadow:
                0 0 0 3px $white,
                0 0 0 5.5px $blue-300;
        }

        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    .alert {
        border-radius: $border-radius-lg;
        border: 1px solid $green;
        order: 2;
        margin: 0 0 1.5rem 0;
    }
    .alert-heading {
        position: relative;
        font-weight: 600;
        font-size: 1rem;
        color: $black;
        text-align: left;
        padding-left: 1.5rem;
        &::before {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
            width: 1rem;
            height: 1rem;
            top: 6px;
            left: 0;
        }
    }
    .modal.modal-component .modal-dialog .modal-content {
        p.modal-body {
            padding: 0;
        }
        .modal-body {
            display: flex;
            flex-direction: column;
            padding: 0 1.5rem;

            .textbox-question {
                padding: 0;
                margin: 0 0 1.5rem 0;

                label {
                    text-align: left;
                    font-weight: 900;
                }
            }
        }
        .modal-body-inner {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .modal-footer {
            padding: 0 1.5rem;
            margin: 0 0 1.5rem 0;

            button.btn {
                order: 1;
                margin-bottom: 1.5rem;
            }
            button.btn.skip-button {
                padding: 0;
                order: 2;
                font-size: 0.875rem;
                @include media-breakpoint-up(md) {
                    font-size: 1rem;
                }
            }
            .modal-disclaimer {
                font-size: 0.75rem;
                text-align: left;
                order: 3;
                margin: 0;

                a {
                    text-decoration: none;
                }
            }
        }
    }

    &.progress-saved {
        .modal-footer-button,
        .modal-disclaimer {
            display: none;
        }
        .skip-button {
            margin-bottom: 0;
        }
    }
}
</style>
