<template>
  <baseInputButton
      v-bind="$props"
      v-model="selectedValue"
      buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2">
      <div
          :aria-label="buttonLabel"
          class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"
          :class="{
            'has-sub-copy': buttonLabelSubCopy,
          }">
          <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>
$heritage-border-radius: 60px;
$heritage-border-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-border-color: #0070d1;

.loader {
  position: absolute;
}
.list-button {
  outline: none;
  input[type="radio"],
  input[type="checkbox"] {
      position: static; //override bootstrap
      &:checked + .list-button-content {
          background: $background-color-selected;
          border-color: $heritage-checked-border-color;
          box-shadow: 0 0 0 1px $blue;
          &:not(.has-sub-copy) {
            font-weight: 500;
            color: $black;
          }
      }
      &:checked + .list-button-content span:nth-child(2) {
          font-weight: 400;
          color: $gray-600;
      }
  }
}
.list-button-content {
  color: $black;
  font-weight: $font-weight-semibold;
  position: relative;
  background: $white;
  transition: all 150ms linear;
  border-radius: $heritage-border-radius;
  border: 1px solid $heritage-border-color;
  box-shadow: $heritage-box-shadow;
  width: 100%;
  outline: none;

  &:not(.has-sub-copy) {
    font-weight: 400;
    color: $darker-gray;
  }

  span {
      &.small {
          color: $darker-gray;
      }
  }
}
</style>