<template>
  <div v-show="!isHidden" class="form-group">
    <label class="control-label" :for="id">
      {{ label }}
      <span class="info">{{ info }}</span>
      <span v-if="isRequired" class="required-marker"></span>
      <span
        v-if="tooltip"
        class="tooltip-info"
        data-toggle="tooltip"
        :title="tooltip"
      ></span>
    </label>
    <div v-if="options" class="row">
      <div :class="{ 'col-sm': colOrientation }">
        <RadioOption
          v-for="(v, k) in options"
          :key="k"
          :v="v"
          :k="k"
          :id="id"
          :is_slot="false"
          :orientation="orientation"
          @select="onSelect($event)"
          :selectedOption="selectedOption"
        ></RadioOption>
      </div>
    </div>
    <div v-else class="row">
      <div :class="{ 'col-sm': colOrientation }">
        <RadioOptionSlot
          @select="onSelect($event)"
          @mounted="onOptionRegistered($event)"
          :selectedOption="selectedOption"
          :orientation="orientation"
          :id="id"
          v-slot="slotProps"
        >
          <slot
            :selectedOption="slotProps.selectedOption"
            :id="slotProps.id"
            :orientation="slotProps.orientation"
          ></slot>
        </RadioOptionSlot>
      </div>
    </div>
    <div
      v-if="validationText && hasError"
      class="help-block"
      data-validation-error
    >
      {{ validationText }}
    </div>
    <p v-if="help && !validationText" class="help-block">
      {{ help }}
    </p>
  </div>
</template>

<script>
import RadioOption from "./RadioOption.vue";
import RadioOptionSlot from "./RadioOptionSlot.vue";

import { str2bool } from "../../util";
export default {
  name: "bc-radio",
  components: {
    RadioOption,
    RadioOptionSlot,
  },
  props: {
    id: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: null,
    },
    value: {
      type: [String, Number, Array],
      default: null,
    },
    options: {
      type: Object,
    },
    info: {
      type: String,
      default: null,
    },
    tooltip: {
      type: String,
      default: null,
    },
    help: {
      type: String,
      default: null,
    },
    validation: {
      type: String,
      default: null,
    },
    is_enabled: {
      type: [Boolean, String],
      default: true,
    },
    is_hidden: {
      type: [Boolean, String],
      default: false,
    },
    is_required: {
      type: [Boolean, String],
      default: false,
    },
    is_valid: {
      type: [Boolean, String],
      default: null,
    },
    orientation: {
      type: String,
      default: "column",
      validator: (value) => {
        // The value must match one of these strings
        return ["row", "column"].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return {
      inputValue: null,
      selectedOption: null,
      checkOptions: {},
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        // console.log("new value", newValue);
        if (newValue) {
          this.selectedOption = newValue;
        }
      },
    },
  },
  computed: {
    isRequired() {
      return str2bool(this.is_required);
    },
    isHidden() {
      return str2bool(this.is_hidden, false);
    },
    isEnabled() {
      return str2bool(this.is_enabled, true);
    },
    colOrientation() {
      if (this.orientation === "row") {
        return false;
      }
      return true;
    },
    hasFeedback() {
      if (this.isValid == null) {
        return false;
      } else {
        return !this.isOnFocus;
      }
    },
    hasError() {
      return !this.isOnFocus && this.isValid === false && this.hasFeedback;
    },
    hasSuccess() {
      return !this.isOnFocus && this.isValid === true && this.hasFeedback;
    },
    validationText() {
      if (this.validation) {
        if (!this.isOnFocus) {
          return this.validation;
        }
      }
      return false;
    },
    // selectedArray() {
    //   // build array of selected properties
    //   let selected = this.$_.get(this.element, "selected");
    //   let selectedArr = [];
    //   if (selected) {
    //     if (Array.isArray(selected)) {
    //       selectedArr = selected;
    //     } else {
    //       selectedArr = selected.split(",");
    //     }
    //   }
    //   return selectedArr;
    // },
  },
  mounted() {
    // load passed initial element from props into data
  },
  methods: {
    onSelect({ checked, key, value }) {
      console.log("[Radio] onSelect", checked, key, value);
      if (checked) {
        this.selectedOption = key;
      }
      this.$emit("input", this.selectedOption);
      this.$emit("select", this.selectedOption);
      // let optionIsChecked = event.target.checked;
      // let optionId = event.target.value;
      // let selected = this.selectedArray;
      // // if (this.element.selected && Array.isArray(this.element.selected)) {
      // //   selected = this.element.selected;
      // // }
      // if (optionIsChecked) {
      //   selected.push(optionId);
      // } else {
      //   this.$_.pull(selected, optionId);
      // }
      // this.element["selected"] = selected;
      // this.element["value"] = selected;
    },
    // isEnabled(option) {
    //   return evaluateBooleanElementProperty(option, "enabled", true);
    // },
    isSelected(optionId) {
      // element.selected is an array giving the option that are checked
      let selected = this.selectedArray;
      if (selected.length > 0) {
        if (selected.indexOf(optionId) !== -1) {
          return true;
        }
      }
      return false;
    },
    onOptionRegistered({ key, value }) {
      // console.log("[Radio] onOptionRegistered", key, value);
      this.checkOptions[key] = value;
    },
  },
};
</script>
