<template>
    <Form
        ref="theForm"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <questionsPageLayout
            id="molding-question-wrapper"
            ref="questionsPageLayout"
            v-model="selectedAnswers"
            isRequired
            :isMetaValid="meta.valid"
            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
            :questionsData="questionsData"
            :validationRules="rules.optionRequired"
            :index="currentGlassIndex"
            @forwardButtonAction="forwardButtonAction"
            @backClick="navigateBackByVehicleQuestions" />
    </Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import globalRules from '@/constants/global-rules';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import { useMainStore } from '@/store';
import issPageValues from '@/router/router-constants/issPage-values';
import BaseFormMixin from '@/mixins/base-form-mixin.js';

// Import Component
import { Form } from 'vee-validate';
import questionsPageLayout from '@/iss-components/questions-page-layout/questions-page-layout.vue';

export default {
    name: 'molding-questions',
    components: {
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        questionsPageLayout,
    },
    mixins: [BaseFormMixin, vehicleQuestionsMixin],
    async beforeRouteEnter(to, from, next) {
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    data() {
        return {
            questionsData: [],
            selectedAnswers: {},
            currentGlassIndex: 0,
            rules: {
                optionRequired: globalRules.OPTION_REQUIRED,
            },
        };
    },
    computed: {
        AlertFewMoreQuestionsHeader() {
            return this.getCmsContent(
                'AdditionalPartsQuestionsAlert',
                'HeadlineText'
            );
        },
        AlertFewMoreQuestionsCopy() {
            return this.getCmsContent(
                'AdditionalPartsQuestionsAlert',
                'BodyText'
            );
        },
        partsOrQuestionsData() {
            return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
                .partsOrQuestions;
        },
    },
    mounted() {
        this.getInitialQuestionData();
    },
    methods: {
        arePagePrerequisitesValid() {
            const moldingQuestionsFromPageData = useMainStore().pageData(
                issPageValues.MOLDING_QUESTIONS
            );
            return (
                // has childPartQuestions array and has glassName not null
                moldingQuestionsFromPageData?.partsOrQuestions?.some(
                    (part) => part?.glassName
                ) &&
                moldingQuestionsFromPageData.partsOrQuestions.some((glass) =>
                    glass.parts?.some(
                        (part) => part?.childPartQuestions?.length > 0
                    )
                )
            );
        },
        getInitialQuestionData() {
            // get any questions that were already answered
            const alreadyAnsweredQuestions =
                useMainStore().damage.moldingQuestionAnswers;
            this.questionsData = this.partsOrQuestionsData
                .filter((x) => x.parts[0].childPartQuestions.length)
                .map((glass, index) => {
                    // NOTE: questions for property "questions" can differ between layouts
                    glass.questions = glass.parts[0].childPartQuestions;
                    glass.answerKey = `${glass.glassLocation}-${glass.glassName}`;
                    // reset selectedAnswers for this glass
                    this.selectedAnswers[glass.answerKey] = [];
                    const updatedGlass = this.setupInitialData(
                        glass,
                        index,
                        alreadyAnsweredQuestions
                    );
                    // Set up watch for each set of glass questions
                    this.$watch(
                        `selectedAnswers.${glass.answerKey}`,
                        (newValue) => {
                            if (newValue && Object.keys(newValue).length > 0) {
                                this.handleAnswerUpdates(
                                    newValue,
                                    glass.answerKey
                                );
                            }
                        },
                        { deep: true }
                    );
                    return updatedGlass;
                });
        },
        async forwardButtonAction() {
            const questionAnswersArray = this.questionsData.map((glass) => ({
                glassLocation: glass.glassLocation,
                glassName: glass.glassName,
                partNum: glass.answerData.answerResult,
                answeredQuestions: glass.answerData.answeredQuestions,
                isSuppressedPart: glass.isSuppressedPart,
            }));
            // clear out answerData for future page loads; must occur prior to store save
            this.questionsData.forEach((glass) => {
                glass.answerData = {};
            });
            // save to store as order.damage.moldingQuestionArrays (array)
            await this.mainStore.saveMoldingQuestionAnswers(
                questionAnswersArray
            );

            // get parts from the questionAnswers
            const partsOrQuestions = this.partsOrQuestionsData;
            // eslint-disable-next-line no-restricted-syntax
            for (const answer of questionAnswersArray) {
                partsOrQuestions.find(
                    (partOrQuestion) =>
                        partOrQuestion.glassLocation === answer.glassLocation &&
                        partOrQuestion.glassName === answer.glassName
                ).parts[0].childParts = [
                    {
                        partNumber: answer.partNum,
                    },
                ];
            }

            this.navigateForward(partsOrQuestions, null);
        },
    },
};
</script>

<style lang="scss" scoped>
#molding-question-wrapper p.text-body.small {
    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
}

#molding-question-wrapper .form-test-error {
    margin-top: 0 !important; // Overrides extra margin-top on error message text
}
</style>
