<template>
  <inputButtonWrapper
    :buttonWrapperClasses="[
      'list-group list-button-horizontal d-flex flex-column w-100',
      { 'radio-fancy': isCashOrInsurance, 'has-error': errors.length > 0 }
    ]"
    :isMultiSelect="isMultiSelect"
    :modelValue="modelValue"
    :value="value"
    :groupName="groupName"
    :validationRules="validationRules"
    :selectOnKeypress="selectOnKeypress"
    @change="handleAnswerChange"
  >
  <!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
    :class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
    @keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
    @keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
    <div :aria-labelledby="buttonID" class="list-button-horizontal-content d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
      <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>
  <!-- </div> -->
  </inputButtonWrapper>
</template>

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

export default {
  name: "listButtonHorizontal",
  props: {
    isMultiSelect: Boolean,
    groupName: String,
    buttonID: String,
    buttonLabel: String,
    buttonLabelSubCopy: String,
    screenReaderOnlyText: String,
    textPosition: String,
    selectingInitiatesLoad: Boolean,
    loaderColor: String,
    loaderPosition: String,
    isRequired: Boolean,
    isCashOrInsurance: Boolean,
    value: {
      // Field initial value
      type: String,
      default: "",
    },
    validationRules: String,
    selectedValues: [Array, String],
    hasError: Boolean,
    valueToLogType: String,
  },
  data() {
    return {
      isLoaderDisplayed: false,
      checkValue: Boolean,
    };
  },
  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;
    }
  },
  methods: {
    isValueSelectedByArray(arr) {
      return this.isMultiSelect
        ? arr.includes(this.value)
        : arr[0];
    },
    displayLoader() {
      this.isLoaderDisplayed = true;
    },
    handleInputChange() {
      if (!this.selectingInitiatesLoad) {
        this.handleCheckChange();
      }
    },
    handleKeyupArrow() {
      if (this.isMultiSelect) {
        return; // Prevent arrow keys from doing anything if element is a checkbox
      }

      if (!this.selectingInitiatesLoad) {
        this.handleCheckChange();
      }
    },
    triggerButton() {
      if (this.selectingInitiatesLoad) {
        this.displayLoader();
        this.handleCheckChange();
      }

      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">
.list-button-horizontal {

  input[type="radio"],
  input[type="checkbox"] {
    position: absolute;
    height: 0;
    opacity: 0;
    width: 0;

    &:focus-visible+.list-button-horizontal-content {
      box-shadow: 0 0 0 2.5px $blue;
      z-index: 2;
    }

    &:focus+.list-button-horizontal-content {
      box-shadow: 0 0 0 2.5px $blue;
      z-index: 3;
    }

    &:checked+.list-button-horizontal-content {
      background: $blue-100;
      box-shadow: 0 0 0 1px $blue;
      outline: none;
      z-index: 2;
    }

    &:checked:focus+.list-button-horizontal-content {
      box-shadow: 0 0 0 2.5px $blue;
    }

    &:checked+.list-button-horizontal-content p:first-child {
      font-weight: 500;
    }
  }

  .list-button-horizontal-content {
    outline: none;
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border: 1px solid $gray-500;
    border-radius: 0;
    width: 100%;
    color: $gray-600;

    &:hover {
      @include media-breakpoint-up(sm) {
        box-shadow: 0 0 0 4px $blue-300;
        cursor: pointer;
        z-index: 4 !important;
      }
    }

    +p {
      display: none;
    }

    span {
      font-size: .875rem;
    }
  }

  // Cash/Insurance option radio button styling
  &.radio-fancy {
    .list-button-horizontal-content {
      border: 1px solid $blue-700;
      z-index: 2;
      color: $blue;

      span {
        font-size: 1rem;
        font-weight: 500;
      }
    }

    .list-button-horizontal-content:hover {
      background-color: $blue-700;
      color: $white;
      box-shadow: none;
    }

    input[type="radio"],
    input[type="checkbox"] {
      position: absolute;
      height: 0;
      opacity: 0;
      width: 0;

      &:focus-visible+.list-button-horizontal-content {
        border-radius: 0.5rem;
        z-index: 2;
      }

      &:focus+.list-button-horizontal-content {
        z-index: 3;
      }

      &:checked+.list-button-horizontal-content {
        outline: none;
        box-shadow: none;
        color: $white;
        background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
        border-radius: 0.5rem;
        z-index: 5;
      }

      &:checked:focus+.list-button-horizontal-content {
        box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
      }

      &:checked+.list-button-horizontal-content p:first-child {
        font-weight: 500;
      }
    }
  }
}

.col {
  &:first-of-type {
    .list-button-horizontal {
      .list-button-horizontal-content {
        border-bottom-left-radius: 0.5rem;
        border-top-left-radius: 0.5rem;
      }
    }
  }

  &:last-of-type {
    .list-button-horizontal {
      .list-button-horizontal-content {
        border-bottom-right-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
      }
    }
  }

  //Cash/insurance styling
  &:first-of-type {
    .list-button-horizontal.radio-fancy {
      input[type="radio"] {
        &:checked+.list-button-horizontal-content {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        &:checked:focus+.list-button-horizontal-content {
          border-bottom-right-radius: 0.5rem;
          border-top-right-radius: 0.5rem;
        }
      }
    }
  }

  &:last-of-type {
    .list-button-horizontal.radio-fancy {
      input[type="radio"] {
        &:checked+.list-button-horizontal-content {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        &:checked:focus+.list-button-horizontal-content {
          border-bottom-left-radius: 0.5rem;
          border-top-left-radius: 0.5rem;
        }
      }
    }
  }
}
</style>
