<template>
    <transition name="fade" mode="out-in">
        <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 p-md-4">
                <div class="row-one">
                    <span class="m-0 button-label-copy text-truncate" :class="textPosition">
                        {{ buttonLabel }}
                    </span>
                    <span class="m-0 caption mx-1 text-nowrap" :class="textPosition">
                        {{ buttonLabelSubCopy }}
                    </span>
                    <div
                        v-if="displayAvailabilityIndicators"
                        class="availability-indicator rounded-pill text-nowrap"
                        :class="availabilityRatingClass">
                        <div
                            v-if="!isLoaderDisplayed"
                            class="availability-badge"
                            :class="availabilityRating == 'high' ? 'green' : 'orange'"></div>
                        <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">
                            {{ badgeText }}
                        </span>
                        <loader
                            v-if="isLoaderDisplayed"
                            :loaderPosition="left"
                            :allowPageInteraction="true" />
                    </div>
                </div>
                <div class="row-two">
                    <span
                        v-if="buttonBodyCopy"
                        class="m-0 button-label-sub-copy small"
                        v-html="buttonBodyCopy"></span>
                </div>
                <span v-if="screenReaderOnlyText" class="sr-only">
                    {{ screenReaderOnlyText }}
                </span>
            </div>
        </baseInputButton>
    </transition>
</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";
import experimentMixin from "@/mixins/experiment-mixin";
import { experimentSettings } from "@/constants/experiments";

export default {
    name: "shopListButton",
    mixins: [inputButtonWrapperMixin],
    beforeMount() {
        if (this.displayAvailabilityIndicators) {
            this.displayLoader();
            const startDate = this.additionalButtonData.startDate;
            const endDate = this.additionalButtonData.endDate;
            const shopAppointmentType = this.additionalButtonData.shopAppointmentType;

            this.additionalButtonData
                .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
                .then((data) => {
                    this.availabilityRating = data;
                });
        }
    },
    data() {
        return {
            availabilityRating: null,
        };
    },
    computed: {
        displayAvailabilityIndicators() {
            return experimentMixin.methods.hasSettingEqualTo(
                experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
                "true"
            );
        },
        isLoaderDisplayed() {
            return this.availabilityRating == null;
        },
        availabilityRatingClass() {
            if (this.availabilityRating == null) {
                return "gray";
            } else {
                return this.availabilityRating == "high" ? "green" : "orange";
            }
        },
        badgeText() {
            if (this.availabilityRating != null) {
                return this.availabilityRating == "high" ? "Appts available" : "Appts low";
            }

            return "";
        },
    },
    methods: {
        displayLoader() {
            this.isLoaderDisplayed = true;
        },
    },
    components: {
        loader,
        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;
        }
        &: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;
        }
    }
}
.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 {
        &.small {
            font-size: 0.75rem;
            color: $gray-550;
        }
    }
}
.button-content {
    row-gap: 0.25rem;

    .row-one {
        display: flex;
        align-items: center;
        line-height: 1.5rem;

        .button-label-copy {
            font-weight: 500;
        }

        .availability-indicator {
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            margin-left: auto;
            padding: 0.125rem 0.5rem;

            .availability-badge {
                display: inline;
                width: 13px;
                height: 12px;
                background-position: center;
                background-repeat: no-repeat;
                margin: 0 0.25rem 0 0;

                &.green {
                    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
                }

                &.orange {
                    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23E86421'/%3E%3C/svg%3E%0A");
                }
            }
            .button-auxillary-copy {
                box-sizing: border-box;
                justify-content: right;
                line-height: 1.25rem;
                font-weight: 500;
                font-size: 0.75rem;
                align-items: center;
            }

            .loader {
                padding: 0 0.25rem 0 0.25rem;
                padding-top: 0.125rem;
                padding-bottom: 0.125rem;
            }

            .loader:after {
                background-color: $gray-550;
                height: 1rem;
                width: 1rem;
            }

            &.green {
                color: $green-700;
                background-color: $green-100;
            }

            &.orange {
                color: $orange-600;
                background-color: $orange-100;
            }

            &.gray {
                color: $gray-600;
                background-color: $gray-100;
                padding-left: 0.125rem;
                padding-right: 0.125rem;
            }
        }
    }

    .row-two {
        text-align: left;
    }
}
</style>
