<template>
  <!-- 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> -->
  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
    <input
      type="radio"
      :id="radioID"
      :name="groupName"
      :value="radioID"
      aria-required="true"
      @keyup.space="displayComponent"
    />
    <label
      role="radio"
      tabindex="-1"
      aria-checked="false"
      :for="radioID"
      class="d-flex flex-column justify-content-center py-3 px-4"
      @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: "radioList",
  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)) */,
  },
  data() {
    return {
      isError: false,
      display: false,
    };
  },
  methods: {
    displayComponent() {
      this.display = true;
    },
  },
  components: {
    loader,
  },
};
</script>
