<template>
  <transition
      name="fade"
      mode="out-in">
      <div
        v-if="isDisplayed"
        class="appointment-type-question"
        aria-live="polite">
          <buttonQuestion
              ref="buttonQuestion"
              v-model="selectedValues"
              customButtonQuestionId="appointmentTypeQuestion"
              :questionText="questionText"
              :answers="answersToDisplay"
              :groupName="groupName"
              buttonTypeString="listCard"
              :suppressError="suppressError"
              :validationRules="validationRules"
              isRequired />
      </div>
  </transition>
</template>

<script>
import { useMainStore } from '@/store';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';

// Constants
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { experimentSettings } from '@/constants/experiments';

export default {
    name: 'appointment-type-question',
    components: {
        buttonQuestion
    },
    props: {
        modelValue: String,
        groupName: String,
        isAvailable: Boolean,
        isDisplayed: Boolean,
        suppressError: Boolean,
        validationRules: String,
        cmsWidgetName: String,
        isServiceableMobile: Boolean,
        isServiceableInshop: Boolean
    },
    emits: ['update:modelValue'],
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
        },
        answersFromCms() {
            const retCms = this.getCmsContent(this.cmsWidgetName, 'Answers');
            if (retCms && retCms.length > 0 && this.isMobileFeeHidden) {
                return retCms.map((x) => (x.Name === AppointmentTypeStrings.MOBILE ? { ...x, SubText: x.SubText.replace('*', '') } : x));
            }
            return retCms;
        },
        answersToDisplay() {
            const shouldShowMobile = this.isServiceableMobile && this.isItacOrNoComp;
            const shouldShowMobileNotITACNotNoComp = this.isServiceableMobile && !this.isItacOrNoComp;
            const shouldShowInshop = this.isServiceableInshop;
            const shouldShowDropoff = this.isServiceableInshop && !useMainStore().damage.isRepair;
            return this.answersFromCms
                ? this.answersFromCms.filter((answer) => (
                    (answer.Name === AppointmentTypeStrings.IN_SHOP && shouldShowInshop)
                          || (answer.Name === AppointmentTypeStrings.MOBILE && shouldShowMobile)
                          || (answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP && shouldShowMobileNotITACNotNoComp)
                          || (answer.Name === AppointmentTypeStrings.DROP_OFF && shouldShowDropoff)
                ))
                : [];
        },
        selectedValues: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        },
        isITAC() {
            return useMainStore().isITAC;
        },
        isItacOrNoComp() {
            return this.isITAC || useMainStore().isNoComp;
        },
        isMobileFeeHidden() {
            return this.getSettingValue(experimentSettings.ISS_FEATURE_TOGGLE_IS_MOBILE_FEE_HIDDEN) === 'true';
        },
        isMobileOnly() {
            return this.isServiceableMobile && !this.isServiceableInshop;
        }
    },
    watch: {
        answersToDisplay: {
            handler(newValue) {
                // If there is only one option to display and that option is 'Mobile' then select it
                if (
                    newValue.length === 1
                    && newValue.findIndex((answer) => (answer.Name === AppointmentTypeStrings.MOBILE
                    || answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)) !== -1
                ) {
                    if (this.isItacOrNoComp) {
                        this.selectedValues = AppointmentTypeStrings.MOBILE;
                    } else {
                        this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
                    }
                }
            },
            immediate: true
        },
        isMobileOnly: {
            handler(newValue) {
                if (newValue) {
                    if (this.isItacOrNoComp) {
                        this.selectedValues = AppointmentTypeStrings.MOBILE;
                    } else {
                        this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
                    }
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
:deep(.button-question) {
  .list-card img {
    height: auto;
    width: 3.417rem;
  }
}
</style>
