<template>
    <baseInputButton
        v-bind="$props"
        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
        v-model="selectedValue">
        <div class="button-content list-button-content d-flex flex-row py-3 px-4">
            <img
                v-if="shouldDisplaySideImage"
                :id="buttonImageId"
                class="ms-auto order-3"
                :src="buttonImage"
                :alt="altText" />
            <div class="order-2">
                <p class="m-0">
                    <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>
                </p>
            </div>
        </div>
    </baseInputButton>
</template>

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

const INLINE_IMAGE_TOKEN = "custom:inlineImage";

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

function getInlineAltText(token) {
    let innerTokens = token.split(",");

    return innerTokens[1] ?? "";
}

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

<style lang="scss" scoped>
.list-button {
    outline: none;
    input[type="radio"],
    input[type="checkbox"] {
        position: static; //override bootstrap

        &:focus-visible + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:focus + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:checked + .list-button-content {
            color: $black;
            font-weight: 500;
            background: $blue-100;
            box-shadow: 0 0 0 1px $blue;
        }
        &:checked:focus + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:checked + .list-button-content p,
        &:checked + .list-button-content span {
            font-weight: 500;
        }
        &:checked + .list-button-content span:nth-child(2) {
            font-weight: 400;
            color: $gray-600;
        }
    }
}
.list-button-content {
    color: $gray-600;
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border-radius: 50rem;
    border: 1px solid $gray-500;
    width: 100%;
    outline: none;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);

    span {
        &.small {
            font-size: 0.75rem;
            color: $gray-550;
        }
    }
}
</style>
