<template>
  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
    <div class="page-container-grouped-styles overflow-auto">
      <siteHeader cmsWidgetName="SiteHeaderWidget" />
      <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
      <div class="fade-on-route-transition sub-container make-tall px-5">
        <div v-html="ProviderPreferenceHeaderText"  class="text-center mt-4 mb-4" ></div>
        <div
            v-html="ProviderPreferenceBodyText"
            class="mt-0" 
        ></div>
        <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> 

        <buttonQuestion
            cmsWidgetName="ServiceLocationQuestion"
            :questionText="questionText"
            :answers="answersFromCms"
            buttonTypeString="listButton"
            isRequired
            validationRules="questions-required" />

        <siteFooter
          cmsWidgetName="SiteFooterWidget"
          :isForwardActionDisabled="!meta.valid"
          @backClicked="backButtonAction"
          @forwardClicked="forwardButtonAction"
          ref="siteFooter"
        />
      </div>
    </div>
  </Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import buttonQuestion from "@/digital-components/button-question/button-question";

// Import Component
import baseFormMixin from "@/mixins/base-form-mixin";
import { Form,defineRule } from "vee-validate";
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 shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';

// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
export default {
  name: "provider-preference",
  props:{
    //answersToDisplay: Array
  },
  mixins: [baseFormMixin],
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
    shoppreferenceModal,
    buttonQuestion
  },
  data() {
    return {};
  },
  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);
    });
  },
  computed: {
    ProviderPreferenceHeaderText(){
      return this.getCmsContent("ProviderPreference", "HeaderText");
    },
    ProviderPreferenceBodyText(){
      return this.getCmsContent("ProviderPreference", "BodyText");
    },
    questionText() {
            return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
        },
    answersFromCms() {
            return this.getCmsContent("ServiceLocationQuestion", "Answers");
        },
      },
  methods: {
    arePagePrerequisiteValid() {
      return true;
    },
    backButtonAction() {
      /**
       * this.navigationScenarios comes from base-mixin
       */
      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
    },
    async forwardButtonAction() {},
    resetDependentState() {},
  },
};
</script>
<style lang="scss">
#sub-header span{
color: #000000;
}
</style>