<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"
                v-model="selectedValue"
                :suppressError="suppressError"
                :validationRules="validationRules"
                isRequired
                :labelBold="labelBold" />
        </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,
        labelBold: {
            type: Boolean,
            required: false,
            default: false,
        },
        zipCode: String,
    },
    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 zipCode = this.zipCode;

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

            if (!this.mobileFeeApplies) {
                answers.forEach((item) => {
                    if (item.Name.toLowerCase() === "mobile") {
                        item.SubText = item.SubText.replace("*", "");
                    }
                });
            }
            return answers;
        },
        selectedValue: {
            get: function () {
                if (this.modelValue === AppointmentTypeStrings.DROP_OFF) {
                    return AppointmentTypeStrings.IN_SHOP;
                } else {
                    return this.modelValue;
                }
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        isMobileOnly() {
            return this.isServiceableMobile && !this.isServiceableInshop;
        },
        isInshopOnly() {
            return this.isServiceableInshop && !this.isServiceableMobile;
        },
    },
    watch: {
        answersToDisplay: {
            handler(newValue) {
                // If there is only one option to display and that option is 'Mobile' or 'Inshop' then select it
                if (newValue.length == 1) {
                    const name = newValue[0].Name;
                    if (
                        name === AppointmentTypeStrings.MOBILE ||
                        name === AppointmentTypeStrings.IN_SHOP
                    ) {
                        this.selectedValue = name;
                    }
                }
            },
            immediate: true,
        },
        isMobileOnly: {
            handler(newValue) {
                if (newValue) {
                    this.selectedValue = AppointmentTypeStrings.MOBILE;
                }
            },
        },
        isInshopOnly: {
            handler(newValue) {
                if (newValue) {
                    this.selectedValue = AppointmentTypeStrings.IN_SHOP;
                }
            },
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>

<style lang="scss">
.appointment-type-question {
    .list-card img {
        height: 1.5rem;
        width: auto;
    }
}
div.appointment-type-question div.button-question div.col div.button-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
div.appointment-type-question div.button-question div.question-text span {
    font-weight: 600;
    font-family: UrbanistRegular;
}
</style>
