<template>
    <div class="payment-method-question">
        <buttonQuestion
            v-model="selectedMethod"
            groupName="payment-method"
            buttonTypeString="payment-method-list-button"
            :buttonTypeObject="paymentMethodListButton"
            isWide
            :questionText="paymentMethodQuestionText"
            :answers="paymentMethodAnswerData"
            isRequired
            :validationRules="validationRules"
            textPosition="text-start" />
    </div>
</template>

<script>

import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import widgetFields from '@/constants/cms-widget-fields.js';
import paymentMethodListButton from './payment-method-list-button/payment-method-list-button.vue';
import { markRaw } from 'vue';
import { analyticsPaymentTypeMap } from '@/constants/analytics';

export default {
    name: 'payment-method-question',
    components: {
        buttonQuestion
    },
    props: {
        modelValue: String,
        validationRules: String,
        cmsWidgetName: String
    },
    emits: ['update:modelValue'],
    data() {
        return {
            paymentMethodListButton: markRaw(paymentMethodListButton)
        };
    },
    computed: {
        selectedMethod: {
            get() {
                return this.modelValue;
            },
            set(selectedMethod) {
                this.pushEventToGA('submit_order', 'payment_type_selected', analyticsPaymentTypeMap.get(selectedMethod), true);
                this.$emit('update:modelValue', selectedMethod);
            }
        },
        paymentMethodQuestionText() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
        },
        paymentMethodAnswerData() {
            const cmsData = this.getInputQuestionWidgetAnswersNullSafe(this.cmsWidgetName);

            return cmsData.map((answer) => ({
                buttonLabel: answer.Text,
                altText: answer.Text,
                groupName: 'payment-method',
                value: answer.Name,
                buttonImage: answer.AnswerImageUrl
            }));
        }
    }
};
</script>

<style lang="scss" scoped>
.payment-method-question {
    :deep(.question-text span) {
        text-align: left;
        line-height: 1.5rem;
    }
}
</style>
