<template>
    <baseInputButton
        v-bind="$props"
        v-model="selectedValue"
        buttonWrapperClasses="list-group base-input-button list-button payment-method d-flex flex-column w-100 no-hover">
        <div class="button-content list-button-content d-flex flex-row">
            <div>
                <span
                    v-for="token in tokens"
                    :key="token">
                    <span v-if="isInlineImageToken(token)">
                        <img
                            v-if="hasImage"
                            :src="buttonImage"
                            :alt="getInlineAltText(token)" />
                        <span v-else> {{ getInlineAltText(token) }}</span>
                    </span>
                    <span v-else>
                        {{ token }}
                    </span>
                </span>
            </div>
            <img
                v-if="shouldDisplaySideImage"
                :id="buttonImageId"
                class="ms-auto"
                :src="buttonImage"
                :alt="altText" />
        </div>
    </baseInputButton>
</template>

<script>
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin.js';
import { splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper.js';

const INLINE_IMAGE_TOKEN = 'custom:inlineImage';

function isInlineImageToken(token) {
    return token.includes(INLINE_IMAGE_TOKEN);
}

function getInlineAltText(token) {
    const innerTokens = token.split(',');

    return innerTokens[1] ?? '';
}

export default {
    name: 'payment-method-list-button',
    components: {
        baseInputButton
    },
    mixins: [inputButtonWrapperMixin],
    computed: {
        tokens() {
            return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? '');
        },
        hasImage() {
            return !!this.buttonImage;
        },
        shouldDisplaySideImage() {
            return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
        }
    },
    methods: {
        isInlineImageToken,
        getInlineAltText
    }
};
</script>

<style lang="scss" scoped>
.list-button.payment-method.list-group {
    outline: none;
    input[type="radio"],
    input[type="checkbox"] {
        &:checked + .list-button-content {
            background: $background-color-selected;
            border-color: $heritage-blue-primary;
            font-weight: 600;
            color: $black;
        }
    }
    margin-bottom: .75rem;
    border: none;

    &.has-error  {
        input[type="radio"],
        input[type="checkbox"] {
            &:focus + .list-button-content {
                box-shadow: none;
            }
        }
    }
}

.list-button-content {
    color: $darker-gray;
    font-weight: 400;
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border-radius: 3.75rem;
    border: 1px solid #CACBCC;
    width: 100%;
    outline: none;
    padding: .625rem 2rem;
    height: 2.875rem;
}
</style>
