<template>
    <div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
    <div class="switch-payment-button">
        <paymentSwitchButton
            v-if="paymentType !== paymentTypes.cc"
            :buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
            :buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
            :buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
            @click-event="switchPaymentClick(paymentTypes.cc)" />
    </div>
    <div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
    <div class="switch-payment-button">
        <paymentSwitchButton
            v-if="paymentType !== paymentTypes.pp"
            :buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
            :buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
            :buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
            @click-event="switchPaymentClick(paymentTypes.pp)" />
    </div>
    <div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
    <div class="switch-payment-button">
        <paymentSwitchButton
            v-if="paymentType !== paymentTypes.ap"
            :buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
            :buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
            :buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
            @click-event="switchPaymentClick(paymentTypes.ap)" />
    </div>
</template>

<script>
import paymentSwitchButton from "./payment-switch-button/payment-switch-button";

export default {
    name: "paymentSwitch",
    data() {
        return {
            paymentTypes: {
                cc: "cc",
                pp: "pp",
                ap: "ap",
            },
        };
    },
    props: {
        cmsWidgetName: String,
        paymentType: String,
    },
    computed: {
        switchPaymentHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        paymentMethodAnswerData() {
            const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");

            if (!rawData) {
                return [];
            } else {
                return rawData;
            }
        },
        paymentMethodsInfo() {
            return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
                accumulator[paymentMethod.Name] = {
                    buttonText: paymentMethod.Text,
                    answerImageUrl: paymentMethod.AnswerImageUrl,
                    imageId: paymentMethod.ImageId,
                };
                return accumulator;
            }, {});
        },
    },
    methods: {
        switchPaymentClick(paymentType) {
            this.$emit("switch-payment-event", paymentType);
        },
    },
    components: {
        paymentSwitchButton,
    },
};
</script>

<style lang="scss">
.switch-payment-header {
    font-weight: 500;
    color: $black;
}

.switch-button-separator {
    text-align: center;
    color: $black;
}

.switch-payment-button button {
    width: 100%;
    color: $black;
}
</style>
