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

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";

export default {
    name: "appointment-type-question",
    props: {
        modelValue: String,
        groupName: String,
        isAvailable: Boolean,
        isDisplayed: Boolean,
        suppressError: Boolean,
        validationRules: String,
        cmsWidgetName: String,
        isServiceableMobile: Boolean,
        isServiceableInshop: Boolean,
        mobileFeeApplies: Boolean,
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, "Answers");
        },
        answersToDisplay() {
            const shouldShowMobile = this.isServiceableMobile;
            const shouldShowInshop = this.isServiceableInshop;
            const shouldShowDropoff =
                this.isServiceableInshop && !this.$store.getters.damage.isRepair;

            var answers = this.answersFromCms
                ? this.answersFromCms.filter((answer) => {
                      return (
                          (answer.Name == AppointmentTypeStrings.IN_SHOP && shouldShowInshop) ||
                          (answer.Name == AppointmentTypeStrings.MOBILE && shouldShowMobile) ||
                          (answer.Name == AppointmentTypeStrings.DROP_OFF && shouldShowDropoff)
                      );
                  })
                : [];

            if (!this.mobileFeeApplies) {
                answers.forEach((item) => {
                    if (item.Name.toLowerCase() === "mobile") {
                        item.SubText = item.SubText.replace("*", "");
                    }
                });
            }
            return answers;
        },
        selectedValue: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        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 == "Mobile") != -1
                ) {
                    this.selectedValues = "Mobile";
                }
            },
            immediate: true,
        },
        isMobileOnly: {
            handler(newValue) {
                if (newValue) {
                    this.selectedValues = "Mobile";
                }
            },
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>

<style lang="scss">
.appointment-type-question {
    .list-card img {
        height: 1.5rem;
        width: auto;
    }
}
</style>
