<template>
  <baseInputButton
      v-bind="$props"
      v-model="selectedValue"
      buttonWrapperClasses="list-group base-input-button list-button d-flex flex-column w-100">
      <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"
            :class="textPosition">
              {{ 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="[loaderColor, loaderPosition]" />
      </div>
  </baseInputButton>
</template>

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

export default {
    name: 'list-button',
    components: {
        loader,
        baseInputButton
    },
    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();
            }
        }
    }
};
</script>

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

      &:focus-within + .list-button-content {
          border: $border-input-focus;
      }

      &:checked + .list-button-content {
          color: $black;
          font-weight: 500;
          background: #e7f1f6;
          border-color: $heritage-blue-primary;
      }
      &: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-xl;
  border: 1px solid $gray-350;
  width: 100%;
  outline: none;
  box-shadow: $box-shadow-input;
  height: 2.8125rem;
  margin-bottom: .625rem;

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