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

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";

export default {
    name: "payment-method-question",
    data() {
        return {
            paymentMethodListButton: paymentMethodListButton,
        };
    },
    props: {
        modelValue: String,
        validationRules: String,
        showApplePay: Boolean,
        isInsurance: Boolean,
    },
    methods: {
        getAnswersNullSafe(widgetName) {
            const rawData = this.getCmsContent(widgetName, "Answers");

            if (!rawData) {
                return [];
            } else {
                return rawData;
            }
        },
    },
    computed: {
        selectedMethod: {
            get: function () {
                return this.modelValue;
            },
            set: function (selectedMethod) {
                this.$emit("update:modelValue", selectedMethod);
            },
        },
        paymentMethodQuestionText() {
            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
        },
        paymentMethodAnswerData() {
            var cmsData;
            if (this.showApplePay) {
                cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
            } else {
                cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
            }

            var tempItems = cmsData.map((answer) => {
                return {
                    buttonLabel: answer.Text,
                    altText: answer.Text,
                    groupName: "payment-method",
                    value: answer.Name,
                    buttonImage: answer.AnswerImageUrl,
                };
            });

            if (this.isInsurance) {
                tempItems.splice(
                    tempItems.findIndex((a) => a.value === "Insurance"),
                    1
                );
            }

            return tempItems;
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>

<style lang="scss">
.payment-method-question {
    .question-text span {
        text-align: left;
        line-height: 24px;
    }
}
</style>
