<template>
    <baseInputButton
        v-bind="$props"
        buttonWrapperClasses="list-group base-input-button list-button rounded-pill 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 p-md-4">
            <span class="m-0" :class="[textPosition, labelBold ? 'span-bold' : '']">
                {{ buttonLabel }}
            </span>
            <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
                {{ buttonLabelSubCopy }}
            </span>
            <span v-if="screenReaderOnlyText" class="sr-only">
                {{ screenReaderOnlyText }}
            </span>
            <loader
                v-if="isLoaderDisplayed && selectingInitiatesLoad"
                :class="[this.loaderColor, this.loaderPosition]" />
        </div>
    </baseInputButton>
</template>

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

export default {
    name: "listButton",
    mixins: [inputButtonWrapperMixin],
    props: {
        loaderColor: String,
        loaderPosition: {
            type: String,
            default: "right",
        },
    },
    data() {
        return {
            isLoaderDisplayed: false,
        };
    },
    methods: {
        displayLoader() {
            this.isLoaderDisplayed = true;
        },
        preHandleAnswerChange() {
            if (this.selectingInitiatesLoad) {
                this.displayLoader();
            }
        },
    },
    components: {
        loader,
        baseInputButton,
    },
};
</script>

<style lang="scss" scoped>
.loader {
    position: absolute;
}
.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;
            border: 1px solid $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-bold {
            font-weight: 600;
        }
        &: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: 1px solid $gray-500;
    width: 100%;
    outline: none;
    border-radius: 50rem;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);

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