<template>
<div>
    <div class="fade-on-route-transition">
        <siteHeader cmsWidgetName="Header"/>
        <siteSubHeader cmsWidgetName="SubHeader"/>
        <p>Welcome Page Placeholder</p>
        <br />
        <div class="col">
				<dropdownQuestion
					cmsWidgetName="LossStateQuestionWidget"
					v-model="addressModel.lossState"
					ref="lossState"
					inputId="LossStateQuestionWidget"
					:options="stateOptions"
					disableAutoFill
					validationRules="loss-state-required"
				/>
		</div>
        <navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
        <navButton text="Google" :scenario="this.navigationScenarios.CLICKED_TEST"></navButton>
    </div>
</div>
</template>

<script>
    import navButton from "@/common-components/nav-button/nav-button";
    import siteHeader from '@/common-components/site-header/site-header';
    import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
    import { settleAllPromises } from "@/helpers/layout-helper";
    import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
    import { defineRule } from "vee-validate";
    import { required } from "@/helpers/validation-rules";
    import { errorMessages } from "@/constants/error-messages";

    //define validation rules
    defineRule("loss-state-required", required(errorMessages.STATE_REQUIRED));

    export default ({
        name: "welcome-page",
        emits: ['update:modelValue'], // The component emits an event
	    props: {
		    modelValue: {
			    type: Object,
			    default: () => ({
				    lossState: "",
			    }),
		    },
		    validationRules: String,       
	    }, 
        components: { navButton, siteHeader, dropdownQuestion, siteSubHeader },
        async beforeRouteEnter(to, from, next) 
        {
            // Call APIs
            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

            // Settle promises and get results
            const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
                },
            ];
                
            //use resultMap to populate layout content.
            let resultMap = await settleAllPromises(promiseResultMap);

            next((vm) => {
                vm.setCmsContent(resultMap.cmsContent);
            });
        },
        computed: 
        {
		    stateOptions: {
			    get: function () {
				    return {
					    'AL': 'Alabama',
					    'AK': 'Alaska',
					    'AZ': 'Arizona',
					    'AR': 'Arkansas',
					    'CA': 'California',
					    'CO': 'Colorado',
					    'CT': 'Connecticut',
					    'DE': 'Delaware',
					    'DC': 'District Of Columbia',
					    'FL': 'Florida',
					    'GA': 'Georgia',
					    'HI': 'Hawaii',
					    'ID': 'Idaho',
					    'IL': 'Illinois',
					    'IN': 'Indiana',
					    'IA': 'Iowa',
					    'KS': 'Kansas',
					    'KY': 'Kentucky',
					    'LA': 'Louisiana',
					    'ME': 'Maine',
					    'MD': 'Maryland',
					    'MA': 'Massachusetts',
					    'MI': 'Michigan',
					    'MN': 'Minnesota',
					    'MS': 'Mississippi',
					    'MO': 'Missouri',
					    'MT': 'Montana',
					    'NE': 'Nebraska',
					    'NV': 'Nevada',
					    'NH': 'New Hampshire',
					    'NJ': 'New Jersey',
					    'NM': 'New Mexico',
					    'NY': 'New York',
					    'NC': 'North Carolina',
					    'ND': 'North Dakota',
					    'OH': 'Ohio',
					    'OK': 'Oklahoma',
					    'OR': 'Oregon',
					    'PA': 'Pennsylvania',
					    'RI': 'Rhode Island',
					    'SC': 'South Carolina',
					    'SD': 'South Dakota',
					    'TN': 'Tennessee',
					    'TX': 'Texas',
					    'UT': 'Utah',
					    'VT': 'Vermont',
					    'VA': 'Virginia',
					    'WA': 'Washington',
					    'WV': 'West Virginia',
					    'WI': 'Wisconsin',
					    'WY': 'Wyoming',            
				    }
			    }
		    },
            addressModel: 
            {
			    get: function() {
				    return this.modelValue;
			    },  
		    },
        }
    })
</script>

<style scoped>
    p {
        font-weight: bold;
        color: purple;
    }

</style>