<template>
  <Form
    ref="theForm"
    v-slot="{ meta }"
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit">
      <div class="page-container-grouped-styles">
          <div class="fade-on-route-transition position-relative">
              <loadingModal
                ref="loadingModal"
                :textSlides="loadingText" />
              <siteHeader
                ref="siteHeader"
                cmsWidgetName="SiteHeaderWidget" />
              <div class="select-car">
                  <div class="container-fluid pb-2">
                      <div class="row px-3">
                          <div class="col">
                              <div class="pb-1 mt-4">
                                  <h5
                                    ref="siteSubHeader"
                                    class="text-center text-black"
                                    v-html="coverageStatementSubHeader">
                                  </h5>
                                  <div
                                    ref="explanatoryText"
                                    class="body-text text-center mt-2"
                                    v-html="explanatoryText">
                                  </div>
                                  <div
                                    ref="secondaryText"
                                    class="text-center mt-4 mb-1 fw-bold text-black"
                                    v-html="secondaryText">
                                  </div>
                                  <div
                                    v-if="verifiedDeductible"
                                    class="d-flex justify-content-center cost">
                                    {{ formattedDeductible }}
                                  </div>
                                  <div
                                    v-if="isQuoteDisplayed"
                                    class="d-flex justify-content-center cost mb-0">
                                    {{ formattedServicePrice }}
                                  </div>
                                  <div
                                    v-if="verifiedITAC"
                                    class="d-flex justify-content-center mb-4 deductible-text">
                                    {{ deductibleText }}&nbsp;
                                    <span class="text-success fw-bold">{{ formattedDeductible }}</span>
                                  </div>
                                  <alert
                                    v-if="verifiedITAC"
                                    ref="verifiedITACAlert"
                                    class="mb-5"
                                    cmsWidgetName="VerifiedITACAlert"
                                    :manualHeadline="verifiedItacAlertHeader"
                                    :manualCopy="verifiedItacAlertBody"
                                    alertClass="alert-success"
                                    :isDismissible="false">
                                  </alert>
                                  <div
                                    class="fw-bold text-black mt-5 mb-2"
                                    v-html="nextStepsHeader">
                                  </div>
                                  <div
                                    class="body-text"
                                    v-html="nextStepsBody">
                                  </div>
                                <buttonQuestion
                                    v-if="isQuoteDisplayed"
                                    v-model="selectedProvider"
                                    cmsWidgetName="ServiceProviderQuestion"
                                    :questionText="serviceProviderQuestionText"
                                    :answers="serviceProviderQuestionAnswers"
                                    groupName="ServiceProviderQuestionOption"
                                    buttonTypeString="listButton"
                                    isRequired
                                    :validationRules="rules.selectionRequired">
                                </buttonQuestion>
                                <text-block
                                    v-if="isQuoteDisplayed"
                                    cmsWidgetName="DisclaimerWidget"
                                    typeStyle="caption" />
                              </div>
                              <siteFooter
                                ref="siteFooter"
                                class="mt-5"
                                cmsWidgetName="SiteFooterWidget"
                                :isForwardActionDisabled="!meta.valid"
                                @backClicked="navigateBackByVehicleQuestions"
                                @forwardClicked="navigateForward" />
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <recalModal
        ref="RecalModal"
        cmsWidgetName="RecalModal" />
      <contentGroupModal
        ref="DeductibleModal"
        cmsWidgetName="DeductibleModal"
        class="deductible-modal" />
  </Form>
</template>
<script>

// Import Component
import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
import alert from '@/ux-components/alert/alert.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';

// Import Supporting Files
import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
import settleAllPromises from '@/helpers/layout-helper.js';
import { getDamageString } from '@/helpers/damage-helper.js';
import { useMainStore } from '@/store/index.js';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
import globalRules from '@/constants/global-rules.js';
import baseFormMixin from '@/mixins/base-form-mixin.js';
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
import routerParams from '@/router/router-constants/router-params';
import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from '@/constants/bailoutMessage';
import widgetFields from '@/constants/cms-widget-fields.js';

const SAFELITE_PROVIDER = 'Safelite';

export default {
    name: 'coverage-statement',
    components: {
        siteFooter,
        siteHeader,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        recalModal,
        alert,
        contentGroupModal,
        buttonQuestion,
        loadingModal,
        textBlock
    },
    mixins: [baseFormMixin, vehicleQuestionsMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
        const supportingItemsPromise = await useMainStore().getSupportingItems();

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

        const resultMap = await settleAllPromises(promiseResultMap);
        const clonedGlassParts = useMainStore().lineItems.glassParts
            ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
            : [];
        const availableLineItems = [
            ...(resultMap.supportingItems ?? []),
            ...(clonedGlassParts ?? [])
        ];

        let hasBailedOut = false;
        let pricingResults = [];
        if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) {
            await useMainStore().getFinalDeductible();
            pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
                .catch((err) => {
                    useMainStore()
                        .setBailout(
                            to,
                            bailoutMessage.pricingResponseError(
                                availableLineItems.map((li) => li.partNumber),
                                { code: err.code, message: err.message, data: err.data }
                            )
                        );
                    hasBailedOut = true;
                    next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
                });
        }

        if (!hasBailedOut) {
            // Call the "next" function to complete the transition to this page.
            next((vm) => {
                vm.setCmsContent(resultMap.cmsContent);
                vm.setSupportingItems(resultMap.supportingItems);
                // eslint-disable-next-line no-param-reassign
                vm.setAvailableLineItems(pricingResults);
                vm.$refs.loadingModal.showModal();
                vm.initializeComponent();
                if (!vm.unverified) {
                    useMainStore().disableKeyFields();
                }
            });
        }
    },
    data() {
        const { isRepair } = useMainStore().damage;
        const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
        const { currentDeductible } = useMainStore().order.currentDeductible;
        return {
            isRepair,
            policyLookupSuccessful,
            deductibleValue: currentDeductible,
            isNoComp: noCoverage ?? false,
            availableLineItems: [],
            selectedProvider: '',
            deductibleText: 'Your deductible is',
            // TODO update when design team gives appropriate text
            loadingText: [
                'Connecting to your insurance company',
                'Nearly there',
                'Finishing up'
            ],
            rules: {
                selectionRequired: globalRules.OPTION_REQUIRED
            },
            supportingItems: null,
            widget: {
                subheader: 'SiteSubHeaderWidget',
                verifiedItacAlert: 'VerifiedITACAlert',
                explanatoryText: 'ExplanatoryTextWidget',
                nextStep: 'NextStepsWidget',
                serviceProviderQuestion: 'ServiceProviderQuestion'
            }
        };
    },
    computed: {
        coverageStatementSubHeader() {
            return this.getTextFromCmsWithCustomIfStatements(
                this.widget.subheader,
                widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
            );
        },
        verifiedItacAlertHeader() {
            return this.getCmsContent(
                this.widget.verifiedItacAlert,
                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
            );
        },
        verifiedItacAlertBody() {
            return this.getCmsContent(
                this.widget.verifiedItacAlert,
                widgetFields.ALERT_WIDGET.BODY_TEXT
            )?.replaceAll('{custom:costSavings}', this.costSavings);
        },
        secondaryText() {
            return this.getTextFromCmsWithCustomIfStatements(
                this.widget.subheader,
                widgetFields.CONTENT_GROUP_WIDGET.SECONDARY_TEXT
            );
        },
        explanatoryText() {
            return this.getTextFromCmsWithCustomIfStatements(
                this.widget.explanatoryText,
                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
            );
        },
        nextStepsHeader() {
            return this.getTextFromCmsWithCustomIfStatements(
                this.widget.nextStep,
                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
            );
        },
        nextStepsBody() {
            return this.getTextFromCmsWithCustomIfStatements(
                this.widget.nextStep,
                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
            )?.replaceAll('{custom:damage}', this.damageText);
        },
        damageText() {
            const damageString = getDamageString();
            return damageString === 'match' ? '' : damageString;
        },
        formattedDeductible() {
            return this.getDeductibleString(this.deductibleValue);
        },
        registerClaimSuccessful() {
            return useMainStore().payment.insuranceCoverage.isVerified;
        },
        verifiedNoComp() {
            return this.policyLookupSuccessful && this.isNoComp;
        },
        verifiedITAC() {
            return this.policyLookupSuccessful
                && !this.isNoComp
                && this.deductibleValue > this.totalServicePrice;
        },
        // TODO maybe tweak
        coveredAndServicePriceAboveOrEqualDeductible() {
            return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
        },
        verifiedDeductible() {
            return useMainStore().isClaimRegistrationRequired
                ? this.registerClaimSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible && this.deductibleValue !== null
                : this.policyLookupSuccessful && this.coveredAndServicePriceAboveOrEqualDeductible;
        },
        unverified() {
            return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
        },
        isADAS() {
            const parts = useMainStore().order.lineItems.glassParts;
            return parts !== null && !!parts.find((part) => part.requiresRecalibration);
        },
        // TODO replace with better method
        totalServicePrice() {
            let total = 0;
            this.availableLineItems.forEach((lineItem) => {
                total += this.getTotalLineItemPrice(lineItem);
            });
            return total;
        },
        formattedServicePrice() {
            return this.getServicePriceString(this.totalServicePrice);
        },
        costSavings() {
            const savings = this.getITACCostSavings(this.deductibleValue, this.totalServicePrice);
            const formattedSavings = parseFloat(savings).toFixed(2);
            return `$${formattedSavings}`;
        },
        serviceProviderQuestionText() {
            return this.getCmsContent(
                this.widget.serviceProviderQuestion,
                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
            );
        },
        serviceProviderQuestionAnswers() {
            return this.getCmsContent(
                this.widget.serviceProviderQuestion,
                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
            );
        },
        isQuoteDisplayed() {
            return this.verifiedITAC || this.verifiedNoComp;
        }
    },
    watch: {
        selectedProvider() {
            const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
            this.$refs.siteFooter.updateButtonText(buttonText);
        },
        nextStepsBody(newValue, oldValue) {
            if (newValue !== oldValue) {
                setupModalLinks(this, 'RecalModal');
                setupModalLinks(this, 'DeductibleModal');
            }
        }
    },
    mounted() {
        setupModalLinks(this);
    },
    methods: {
        arePagePrerequisitesValid() {
            return !!useMainStore().vehicle.carId;
        },
        async initializeComponent() {
            useMainStore().updatePolicyITACFlag(this.verifiedITAC);
            if (this.policyLookupSuccessful
                && useMainStore().order.vehicle.policyVehicleId >= 0
                && useMainStore().isClaimRegistrationRequired
                && !useMainStore().isClaimAlreadyRegistered
                && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)) {
                await useMainStore().registerClaim()?.catch(() => {});
            }
            this.$refs.loadingModal.hideModal();
        },
        async navigateForward() {
            if (this.unverified || this.verifiedDeductible) {
                useMainStore().saveSupportingItems(this.supportingItems);
                this.$router.navigate(
                    navigationScenarios.CLICKED_FORWARD,
                    this.$route,
                    {},
                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                );
            } else if (this.verifiedITAC || this.verifiedNoComp) {
                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
                if (this.selectedProvider === SAFELITE_PROVIDER) {
                    useMainStore().saveSupportingItems(this.supportingItems);
                    this.$router.navigate(
                        navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
                        this.$route,
                        {},
                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                    );
                } else {
                    useMainStore().setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback());
                    this.$router.navigate(
                        navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
                        this.$route,
                        {},
                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                    );
                }
            } else {
                useMainStore().setBailout(this.$router.currentRoute, bailoutMessage.coverageStatementInvalidState());
                this.$router.navigate(
                    navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE,
                    this.$route,
                    {},
                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                );
            }
        },
        getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
            const rawText = this.getCmsContent(widgetName, widgetField);
            return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
        },
        getCustomValueFromString(str) {
            switch (str) {
                case 'coverageUnverified':
                    return this.unverified;
                case 'verifiedDeductible':
                    return this.verifiedDeductible;
                case 'verifiedITAC':
                    return this.verifiedITAC;
                case 'verifiedNoComp':
                    return this.verifiedNoComp;
                case 'ADASReplace':
                    return !this.isRepair && this.isADAS;
                case 'nonADASReplace':
                    return !this.isRepair && !this.isADAS;
                case 'nonADASRepair':
                    return this.isRepair;
                case 'deductibleOverZero':
                    return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
                case 'isDeductibleZero':
                    return this.verifiedDeductible && this.deductibleValue === 0;
                default:
                    return null;
            }
        },
        // TODO move to common location
        getTotalLineItemPrice(lineItem) {
            return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
        },
        // TODO use price formatter
        getDeductibleString(deductible) {
            const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
            return `$${formattedDeductibleFloat}`;
        },
        // TODO use price formatter
        getServicePriceString(price) {
            const formattedPriceFloat = parseFloat(price).toFixed(2);
            return `$${formattedPriceFloat}`;
        },
        getITACCostSavings(vehicleDeductible, totalServicePrice) {
            return vehicleDeductible - totalServicePrice;
        },
        setSupportingItems(newSupportingItems) {
            this.supportingItems = newSupportingItems;
        },
        setAvailableLineItems(newAvailableLineItems) {
            this.availableLineItems = newAvailableLineItems;
        }
    }
};
</script>

<style lang="scss" scoped>
.cost {
  color: $green;
  font-size: 2rem;
  font-weight: 300;
  line-height: 2.75rem;
}

.deductible-text {
    line-height: 1.5rem;
}

:deep p {
    line-height: 1.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    strong {
        color: $black;
    }
}

:deep .question-text {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    & > span {
        text-align: left;
    }
}

:deep .deductible-modal {
  p {
    margin-bottom: 0 !important;
    font-size: 1rem;
    line-height: 1.625rem;
  }
  img.mb-4 {
    margin: 0 !important;
  }
  h5 {
    color: black;
  }
  p:last-child {
    margin-top: 0.5rem;
  }
}
.modal {
    overflow: hidden;
}

</style>
