<template>
    <div :class="`questions-page`">
        <loadingModal ref="loadingModal" />
        <div class="container-fluid page-container-grouped-styles">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4 mt-4">
                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4">
                    <alert
                        ref="alertFewMoreQuestions"
                        cmsWidgetName="alertWidget"
                        class="my-5"
                        alertClass="alert-warning"
                        :manualHeadline="alertFewMoreQuestionsHeader"
                        :manualCopy="alertFewMoreQuestionsCopy"
                        v-bind:isDismissible="false" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4 question-chain-wrapper">
                    <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                        <questionChain
                            ref="questionChain"
                            v-model="selectedAnswers[questionsDatum.answerKey]"
                            :questionData="questionsDatum.questions"
                            :index="i"
                            v-if="showThisQuestionChain(questionsDatum, i)"
                            :answerKey="questionsDatum.answerKey"
                            :validationRules="validationRules" />
                    </div>

                    <slot></slot>

                    <navbar
                        ref="navbar"
                        cmsWidgetName="FunnelFooterWidget"
                        :isForwardActionDisabled="!isMetaValid"
                        @back-clicked="handleBackButtonAction"
                        @ForwardClicked="handleForwardButtonAction" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import alert from "@/ux-components/alert/alert";
import questionChain from "@/digital-components/question-chain/question-chain";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";

export default {
    name: "questions-page",
    props: {
        isMetaValid: Boolean,
        alertFewMoreQuestionsHeader: String,
        alertFewMoreQuestionsCopy: String,
        questionsData: Array,
        validationRules: String,
        modelValue: Object,
        index: Number,
    },
    computed: {
        selectedAnswers() {
            return this.modelValue;
        },
    },
    methods: {
        showThisQuestionChain(glass, i) {
            // return false if no questions or if suppressed
            if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
                return false;
            }
            return this.index === i || glass.answerData?.answerResult?.length > 0;
        },
        handleForwardButtonAction() {
            this.$emit("forwardButtonAction");
        },
        handleBackButtonAction() {
            this.$emit("back-click");
        },
        showLoadingModal() {
            this.$refs.loadingModal.showModal();
        },
    },
    components: {
        funnelHeader,
        alert,
        questionChain,
        funnelSubHeader,
        navbar,
        loadingModal,
    },
};
</script>

<style lang="scss">
.questions-page {
    .question-text {
        margin-bottom: 0.5rem;

        span {
            text-align: left;
        }
    }
    .question-chain-wrapper {
        display: flex;
        flex-direction: column;

        .nav-bar {
            order: 1;
        }
    }
}
</style>
