<template>
  <!-- <div
    class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
  <!-- <input
      :type="isMultiSelect ? 'checkbox' : 'radio'"
      :id="buttonID"
      :name="groupName"
      :value="value"
      :aria-required="isRequired"
      v-model="checkValue"
      :checked="checkValue"
      @change="handleInputChange"
    > -->
  <!-- <label
      tabindex="-1"
      :for="buttonID"
      :aria-label="buttonLabel"
      class="d-flex flex-column justify-content-center py-3 px-4"
      @mouseup="triggerButton"
    > -->
  <!-- LB value: {{ value }}<br />
  LB modelValue: {{ modelValue }}
  LB groupName: {{ groupName }} -->
  <!-- , {'has-error': errors.length > 0 || hasError} -->
  <!-- <inputButtonWrapper
    v-bind="$props"
    :classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
    @change="(e) => $emit('change', e)"
  > -->

  <inputButtonWrapper
    :isMultiSelect="isMultiSelect"
    :value="value"
    :groupName="groupName"
    buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
    :validationRules="validationRules"
    @change="handleAnswerChange"
  >
    <div
      tabindex="-1"
      :aria-label="buttonLabel"
      class="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="[this.loaderColor, this.loaderPosition]"
      />
    </div>
  </inputButtonWrapper>
  <!-- </label> -->
  <!-- </div> -->
</template>

<script>
// import { useField } from "vee-validate";
// import { toRef } from "vue";
import loader from "@/ux-components/loader/loader";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";

export default {
  name: "listButton",
  props: {
    groupName: String,    // TODO KO these shared props should be moved somewhere
    buttonLabel: [Number, String],
    // buttonID: [Number, String],
    isRequired: Boolean,
    textPosition: String,
    buttonLabelSubCopy: String,
    screenReaderOnlyText: String,
    selectingInitiatesLoad: Boolean,
    loaderColor: String,
    loaderPosition: {
      type: String,
      default: "right",
    },
    hasError: Boolean,
    valueToLogType: String,
    validationRules: String,
  },
  data() {
    return {
      isLoaderDisplayed: false,
      // checkValue: false,
    };
  },
  // mounted() {
  //   if (Array.isArray(this.validateValue)) {
  //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
  //     const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);

  //     if (this.checkValue != isSelectedByValidator) {
  //       this.handleChange(this.value);
  //     }
  //   }
  //   else {
  //     this.checkValue = this.selectedValues == this.value;
  //   }
  // },
  emits: ["change"],
  methods: {
    // isValueSelectedByArray(arr) {
    //   return this.isMultiSelect
    //     ? arr.includes(this.value)
    //     : arr[0];
    // },
    displayLoader() {
      this.isLoaderDisplayed = true;
    },
    handleAnswerChange(e) {
      // TODO KO make it work on YMMS with keypresses
      // There must be a way to tell the difference between keypress and
      // submit via veevalidate. Check out the Form in vehicle-damage
      if (this.selectingInitiatesLoad) {
        this.displayLoader();
      }
      // else {
      //   console.log("lbTest event: ", e);
      //   // this.$emit("change", e);
      // }

      console.log(e)
      this.$emit("change", e);
    },
    // handleInputChange() {
    //   if(!this.selectingInitiatesLoad) {
    //     this.handleCheckChange();
    //   }
    // },
    // handleKeyupArrow() {
    //   if (this.isMultiSelect) {
    //     return; // Prevent arrow keys from doing anything if element is a checkbox
    //   }
    // },
    // triggerButton() {
    //   if (this.selectingInitiatesLoad) {
    //     this.displayLoader();
    //     // this.handleCheckChange();
    //   }

    //   // TODO KO THIS IS IMPORTANT
    //   // Move this to input-button-wrapper?
    //   // this.pushEventToGA(
    //   //   this.$route.query[queryStrings.FMG_PAGE],
    //   //   this.GaActions.CLICKED,
    //   //   this.value.toString(),
    //   //   true,
    //   //   this.valueToLogType
    //   // );
    // },
    // handleCheckChange() {
    //   const emitEvent = {
    //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
    //     value: this.value.toString(),
    //     buttonId: this.buttonID && this.buttonID.toString(),
    //   };

    //   this.handleChange(this.value);
    //   this.$emit("isCheckedChanged", emitEvent);
    //   this.$emit("update:modelValue", emitEvent);
    // },
  },
  components: {
    loader,
    inputButtonWrapper,
  },
  // setup(props) {
  //   const inputType = props.isMultiSelect ? "checkbox" : "radio";

  //   const fieldOptions = {
  //     type: inputType,
  //     checkedValue: props.value,
  //     potentialInitialValue: props.selectedValues,
  //   };

  //   // Set initialValue for validation setup if pre-selected
  //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
  //   if (
  //     props.selectedValues &&
  //     (props.selectedValues.includes(props.value) ||
  //       props.selectedValues.includes(parseInt(props.value)))
  //   ) {
  //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
  //   }

  //   const { handleChange, errors, value } = useField(
  //     toRef(props, "groupName"),
  //     toRef(props, "validationRules"),
  //     fieldOptions
  //   );

  //   const validateValue = value;

  //   return {
  //     handleChange,
  //     errors,
  //     validateValue,
  //     fieldOptions, // only need to expose this for unit test purposes
  //   };
  // },
};
</script>

<style lang="scss" scoped>
.list-group {
  &.list-button {
    outline: none;
    input[type="radio"],
    input[type="checkbox"] {
      position: static; //override bootstrap
      // height: 0;
      // opacity: 0;

      &:focus-visible + .list-button-content {
        box-shadow: 0 0 0 2.5px $blue;
      }
      &:focus + .list-button-content {
        box-shadow: 0 0 0 2.5px $blue;
      }
      &:checked + .list-button-content {
        color: $black;
        font-weight: 500;
        background: $blue-100;
        box-shadow: 0 0 0 1px $blue;
      }
      &:checked:focus + .list-button-content {
        box-shadow: 0 0 0 2.5px $blue;
      }
      &: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-lg;
    border: 1px solid $gray-500;
    width: 100%;
    outline: none;

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

    &:hover {
      @include media-breakpoint-up(sm) {
        box-shadow: 0 0 0 4px $blue-300;
      }
      cursor: pointer;
    }
    + p {
      display: none;
    }
  }
}
</style>
