<template>
    <Form
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="fade-on-route-transition">
            <div class="justify-content-center">
                <siteHeader cmsWidgetName="SiteHeaderWidget" />
            </div>
            <div class="iss-heritage-container-width">
                <div class="vehicle-lookup-container iss-heritage-content-container-width">
                    <SiteSubHeader
                        cmsWidgetName="SiteSubHeaderWidget"
                        class="subheader mt-4"
                        subHeaderMarginClasses="mt-4" />
                    <VinLookupMethods
                        ref="VinLookupMethods"
                        v-model="selectedVinLookupMethod"
                        cmsWidgetName="VINLookupMethod"
                        groupName="VinLookupMethods" />
                    <SiteFooter
                        cmsWidgetName="SiteFooterWidget"
                        :isForwardActionDisabled="isForwardActionDisabled"
                        class="mt-5"
                        @backClicked="navigateBack"
                        @forwardClicked="forwardButtonAction" />
                    <TextBlock
                        cmsWidgetName="SecurityTextWidget"
                        class="security-text" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import vinLookupMethodSelections from '@/constants/vin-lookup-methods';

// Import Component
import SiteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
import TextBlock from '@/digital-components/text-block/text-block.vue';

export default {
    name: 'vehicle-lookup',
    components: {
        Form,
        SiteFooter,
        siteHeader,
        SiteSubHeader,
        VinLookupMethods,
        TextBlock
    },
    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);
            vm.$refs.VinLookupMethods.initializeComponent();
        });
    },
    data() {
        return {
            selectedVinLookupMethod: null
        };
    },
    computed: {
        isForwardActionDisabled() {
            return this.selectedVinLookupMethod === null;
        }
    },
    methods: {
        arePagePrerequisiteValid() {
            return true;
        },
        async forwardButtonAction() {
            switch (this.selectedVinLookupMethod) {
                case vinLookupMethodSelections.MANUALVIN:
                    this.$router.navigate(
                        this.navigationScenarios.SELECTED_MANUAL_VIN,
                        this.$route
                    );
                    break;
                case vinLookupMethodSelections.LICENSEPLATE:
                    this.$router.navigate(
                        this.navigationScenarios.SELECTED_LICENSE_PLATE,
                        this.$route
                    );
                    break;
                case vinLookupMethodSelections.HOMEADDRESS:
                    this.$router.navigate(
                        this.navigationScenarios.SELECTED_HOME_ADDRESS,
                        this.$route
                    );
                    break;
                case vinLookupMethodSelections.NOVIN:
                    const partsOrQuestionsResponse = await this.getPartsOrQuestions();
                    await this.navigateForward(
                        partsOrQuestionsResponse.data.partsOrQuestions,
                        this
                    );
                    break;
                default:
                    break;
            }
        },
        resetDependentState() {}
    }
};
</script>

<style lang="scss" scoped>
.iss-heritage-container-width {
    .vehicle-lookup-container {
        position: relative;
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
    }
}
.subheader {
    :deep(.all-caps) {
        text-transform: uppercase;
    }
    :deep(.subheader-secondary>p) {
        margin-bottom: 0;
    }
}
.security-text {
    text-align: center;
    margin-bottom: 1.5rem;
    :deep(a) {
        font-weight: $font-weight-normal;
        color: $heritage-blue-primary;
        &:hover {
            color: #125b7e;
        }
    }
}
</style>
