import { createVNode as _createVNode } from "vue";
import { defineComponent, reactive, watch, inject } from "vue";
import useMemo from "../_util/hooks/useMemo";
import { checkboxGroupContext } from "./Group";
export default defineComponent({
  name: 'x-checkbox',
  props: {
    prefixCls: {
      default: 'x-checkbox'
    },
    checked: Boolean,
    disabled: Boolean,
    name: String,
    value: [String, Number],
    type: {
      default: 'checkbox'
    }
  },
  emits: ['update:checked', 'change'],

  setup(props, {
    emit,
    slots
  }) {
    const groupContext = inject(checkboxGroupContext);
    const disabledRef = useMemo(() => {
      var _groupContext$disable;

      return (groupContext === null || groupContext === void 0 ? void 0 : (_groupContext$disable = groupContext.disabledRef) === null || _groupContext$disable === void 0 ? void 0 : _groupContext$disable.value) || props.disabled;
    });
    const nameRef = useMemo(() => {
      var _groupContext$nameRef;

      return (groupContext === null || groupContext === void 0 ? void 0 : (_groupContext$nameRef = groupContext.nameRef) === null || _groupContext$nameRef === void 0 ? void 0 : _groupContext$nameRef.value) || props.name;
    });
    const state = reactive({
      checked: props.checked,
      focused: false
    });
    watch(() => props.checked, checked => {
      state.checked = checked;
    });
    const checkedRef = useMemo(() => {
      if (groupContext) return groupContext.valueRef.value.includes(props.value);
      return state.checked;
    });

    function onChange(e) {
      if (props.disabled) return; // @ts-ignore

      const val = e.target.checked;

      if (groupContext) {
        var _slots$default;

        groupContext.toggleOption({
          label: (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots),
          value: props.value
        });
      } else {
        state.checked = val;
        emit('update:checked', val);
      }

      emit('change', val);
    }

    function onFocus() {
      state.focused = true;
    }

    function onBlur() {
      state.focused = false;
    }

    return () => {
      var _slots$default2;

      const {
        prefixCls
      } = props;
      const radioProps = {
        class: [prefixCls, {
          [`${prefixCls}-checked`]: checkedRef.value,
          [`${prefixCls}-focused`]: state.focused,
          [`${prefixCls}-disabled`]: disabledRef.value
        }]
      };
      const inputProps = {
        class: `${prefixCls}_input`,
        name: nameRef.value,
        value: props.value,
        type: props.type,
        checked: !!checkedRef.value,
        disabled: disabledRef.value,
        onFocus,
        onBlur,
        onChange
      };
      return _createVNode("label", radioProps, [_createVNode("input", inputProps, null), _createVNode("div", {
        "class": `${prefixCls}_dot`
      }, null), _createVNode("div", {
        "class": `${prefixCls}_label`
      }, [(_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)])]);
    };
  }

});