export default {
    props: {
        modelValue: [Array, String, Number],
        value: [String, Number],
        isMultiSelect: Boolean,
        groupName: String,
        buttonLabel: [Number, String],
        buttonLabelSubCopy: String,
        buttonImage: String,
        altText: {
            type: String,
            default: ""
        },
        textPosition: String,
        screenReaderOnlyText: String,
        valueToLogType: String,
        validationRules: String,
        isWide: Boolean,
        isRequired: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            selectedValue: null,
        };
    },
    mounted() {
        this.selectedValue = this.modelValue;
    },
    methods: {
        handleAnswerChange(e) {
            if (this.preHandleAnswerChange) {
                this.preHandleAnswerChange(e)
            }
            
            this.$emit("change", e);
        },
    },
    computed: {
        selectedValue: {
            get: () => {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        }
    },
};