<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
            :aria-label="buttonLabel"
            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
            <span class="m-0 position-relative" :class="textPosition">
                {{ buttonLabel }}
                <span
                    v-if="buttonLabelSubCopy"
                    class="premium-appointment-price"
                    :class="textPosition">
                    {{ formattedButtonLabelSubCopy }}
                </span>
            </span>
            <span v-if="screenReaderOnlyText" class="sr-only">
                {{ screenReaderOnlyText }}
            </span>
        </div>
    </baseInputButton>
</template>

<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

export default {
    name: "timeSlotModalListButton",
    mixins: [inputButtonWrapperMixin],
    computed: {
        formattedButtonLabelSubCopy() {
            return this.buttonLabelSubCopy;
        },
    },
    methods: {
        displayLoader() {
            this.isLoaderDisplayed = true;
        },
        preHandleAnswerChange() {
            if (this.selectingInitiatesLoad) {
                this.displayLoader();
            }
        },
    },
    components: {
        baseInputButton,
    },
};
</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;
            span.premium-appointment-price {
                background: $green-200;
            }
        }
        &: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: $border-radius-lg;
    border: 1px solid $gray-500;
    width: 100%;
    outline: none;

    span.premium-appointment-price {
        position: absolute;
        background: $green-100;
        border-radius: 4.5rem;
        line-height: 1.25rem;
        color: $green-700;
        font-size: 0.75rem;
        margin-left: 4px;
        padding: 2px 8px;
        font-weight: 500;
    }
}

.position-relative {
    position: relative;
}
</style>
