<template>
  <div
    class="nv-selection-control nv-radio"
    :class="[
      !customSize ? sizeableClasses : undefined,
      { 'nv-selection-control--disabled': computedDisabled },
      { 'nv-selection-control--readonly': computedReadonly },
      { 'nv-selection-control--selected': isTrue },
    ]"
    v-bind="attrs"
    @click="onClick"
    @keydown="onKeydown"
    @keyup="onKeyup"
  >
    <div class="nv-selection-control__wrap" :class="classInput">
      <input :checked="isTrue" type="radio" />
      <nv-icon :icon="icon" />
    </div>
    <label class="nv-selection-control__label" :class="classLabel">
      <template v-if="label">{{ label }}</template>
      <slot v-else />
    </label>
  </div>
</template>

<script>
import { computed, inject } from "vue";

import { stopAndPrevent } from "../../utils/helpers";
import useSize, { useSizeProps } from "../../composables/sizeable";
import { NvIcon } from "../NvIcon";

export default {
  name: "NvSelectionControl",
  props: {
    modelValue: { required: true },
    val: { required: true },
    label: String,
    disabled: Boolean,
    readonly: Boolean,
    tabindex: [String, Number],
    classInput: [String, Array, Object],
    classLabel: [String, Array, Object],
    trueIcon: {
      type: String,
      default: "nvi-radiobox-on",
    },
    falseIcon: {
      type: String,
      default: "nvi-radiobox-off",
    },
    falseDisabledIcon: {
      type: String,
      default: "nvi-radiobox-blank",
    },
    ...useSizeProps,
  },
  components: { NvIcon },
  setup(props, ctx) {
    const { sizeableClasses, customSize } = useSize(props);

    const parentDisabled = inject("parentDisabled", undefined);
    const computedDisabled = computed(() => parentDisabled || props.disabled);

    const parentReadonly = inject("parentReadonly", undefined);
    const computedReadonly = computed(() => parentReadonly || props.readonly);

    const isTrue = computed(() => props.modelValue === props.val);

    function onClick(e) {
      if (computedReadonly.value || computedDisabled.value || isTrue.value)
        return;
      ctx.emit("update:modelValue", props.val, e);
    }

    function onKeydown(e) {
      if (e.keyCode === 13 || e.keyCode === 32) {
        stopAndPrevent(e);
      }
    }

    function onKeyup(e) {
      if (e.keyCode === 13 || e.keyCode === 32) {
        onClick(e);
      }
    }

    const icon = computed(() =>
      isTrue.value
        ? props.trueIcon
        : computedDisabled.value
        ? props.falseDisabledIcon
        : props.falseIcon
    );
    console.log(icon.value)

    const tabindex = computed(() =>
      computedReadonly.value || computedDisabled.value
        ? -1
        : props.tabindex || 0
    );

    const attrs = computed(() => ({
      tabindex: tabindex.value,
      role: "radio",
      "aria-label": props.label,
      "aria-checked": isTrue.value === true ? "true" : "false",
      "aria-disabled":
        computedDisabled.value || computedReadonly.value ? "true" : void 0,
    }));

    return {
      attrs,
      computedDisabled,
      computedReadonly,
      customSize,
      icon,
      isTrue,
      onClick,
      onKeydown,
      onKeyup,
      sizeableClasses,
    };
  },
};
</script>
