<template>
  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
    <input
    type="radio"
    class="form-check-input"
    aria-checked="false"
    :name="groupName"
    :id="buttonID"
    :aria-required="isRequired"
    :value="value"
    :v-model="checkValue"
    @change="handleCheckChange()"
    :checked="checkValue"
    />
    <label class="d-flex align-items-start form-check-label" :for="buttonID">
      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
      <span v-if="screenReaderOnlyText" class="sr-only">{{
        screenReaderOnlyText
      }}</span>
    </label>
  </div>
</template>

<script>
import { toRefs } from "vue";
import { useField } from "vee-validate";
export default {
  name: "radio",
  props: {
    groupName: String,
    buttonLabel: String,
    buttonID: String,
    isRequired: Boolean,
    value: {
      type: [String, Number],
      default: "",
    },
    screenReaderOnlyText: String,
    selectedValues: [Array, String],
    hasError: Boolean,
  },
  data() {
    return {
      checkValue: Boolean,
    };
  },
  created() {
    if (this.selectedValues) {
      this.checkValue = this.selectedValues[0] === this.value;
    }
  },
  methods: {
    handleClick(value) {
      this.handleChange(value);
    },
    handleCheckChange(newValue, oldValue) {
      const isInitialization = typeof oldValue === "function";
      if (!isInitialization) {

        const emitEvent = {
          checkValue: this.checkValue,
          value: this.value.toString(),
          buttonID: this.buttonID.toString(),
        };

        this.$emit("isCheckedChanged", emitEvent);
        this.$emit("update:modelValue", emitEvent);
      }
    },
  },
  setup(props) {
    const inputType = "radio";
    const {
        value: inputValue,
        handleChange,
        errors,
    } = useField(props.groupName, props.validationRules,
    {
      type: inputType,
      checkedValue: props.value,
    });
    return {
      handleChange,
      errors,
    };
  },
};
</script>

<style lang="scss" scoped>
.form-check {
  .form-check-input {
    border: 1px solid $gray-500;
    border-radius: 100%;
    margin-right: 0.5rem;
    &:checked {
      background-color: $white;
      background-size: 71%;
      border: 1px solid $blue;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
      + label {
        p {
          font-weight: 500;
          font-size: .875rem;
          color: $black;
        }
      }
    }
    &:focus {
      box-shadow: 0 0 0 2.5px $blue;
    }
  }
  &:hover {
    .form-check-input {
      box-shadow: 0 0 0 4px $blue-300;
    }
  }
  p {
    font-weight: 400;
    font-size: .875rem;
    color: $gray-600;
  }
}
</style>
