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

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

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

export default {
    name: 'appointment-type-question',
    components: {
        buttonQuestion
    },
    props: {
        modelValue: String,
        groupName: String,
        isAvailable: Boolean,
        suppressError: Boolean,
        validationRules: String,
        cmsWidgetName: String
    },
    emits: ['update:modelValue'],
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, 'Answers');
        },
        answersToDisplay() {
            return this.answersFromCms
                ? this.answersFromCms.filter((answer) => (
                    (answer.Name === AppointmentTypeStrings.IN_SHOP)
                          || (answer.Name === AppointmentTypeStrings.MOBILE)
                ))
                : [];
        },
        selectedValues: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.appointment-type-question {
    margin-top: .625rem;

    :deep(.list-button-content) {
        padding-top: .625rem;
        padding-bottom: .625rem;
    }
}
</style>
