<!-- See the component-test.vue page for example implementation -->
<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
<!-- Example: -->
<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
<!-- Example -->
<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
<template>
  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true"/>
    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
    </label>
    <p class="small">{{errorMessage}}</p>
  </div>
</template>

<script>
import loader from "@/ux-components/loader/loader";
export default {
  name: "radioHorizontal",
  props: {
    groupName: String, /* Required, unique for each radio button GROUP */
    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
    errorMessage: String, /* Optional, if there is an error message to be displayed */
    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
  },
  data() {
    return {
      isError: false,
      display: false
    };
  },
  methods: {
    displayComponent() {
      this.display = true;
    }
  },
  components: {
    loader,
  },
  computed: {
    isFirstOrLastButton() {
      let className = '';
      if(this.positionInGroup == this.totalInGroup) {
        className = 'last-item'
      } else if(this.positionInGroup == 1) {
          className = 'first-item'
      }
      return className;
    }
  }
};
</script>
<style lang="scss">
.radio-horizontal {
  input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
    &:focus-visible + label {
      box-shadow: 0 0 0 2px $blue;
    }
    &:focus + label {
      box-shadow: 0 0 0 2px $blue;
    }
    &:checked + label {
      background: $blue-100;
      box-shadow: 0 0 0 1px $blue;
    }
    &:checked + label p:first-child {
      font-weight: 500;
    }
  }
  label {
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border: 1px solid $gray-500;
    width: 100%;
    &:hover {
      box-shadow: 0 0 0 4px $blue-100;
      cursor: pointer;
      z-index: 2;
    }
    + p {
      display: none;
    }
    &.error {
      border: 1px solid $danger;
      + p {
        display: flex;
        color: $danger;
      }
    }
    &.first-item {
      border-bottom-left-radius: .5rem;
      border-top-left-radius: .5rem;
    }
    &.last-item {
      border-bottom-right-radius: .5rem;
      border-top-right-radius: .5rem;
    }
  }
}
</style>
