import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { computed, defineComponent, ref, toRef, createVNode as _createVNode } from 'vue';
import '../_util/type';
import useConfigInject from '../config-provider/hooks/useConfigInject';
import useStyle from './style';
import useControlledState from '../_util/hooks/useControlledState';
import CheckableTag from './CheckableTag';
const checkableTagGroupProps = () => ({
  prefixCls: String,
  rootClassName: String,
  itemClassName: String,
  itemStyle: Object,
  options: [Array],
  disabled: Boolean,
  multiple: Boolean,
  value: [String, Number, Array],
  defaultValue: [String, Number, Array],
  'onUpdate:value': Function,
  onChange: Function
});
export default defineComponent({
  name: 'ACheckableTagGroup',
  inheritAttrs: false,
  props: checkableTagGroupProps(),
  setup(props, {
    attrs,
    expose
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject('tag', props);
    const groupPrefixCls = computed(() => `${prefixCls.value}-checkable-group`);
    // Style
    const [wrapSSR, hashId] = useStyle(prefixCls);
    // =============================== Option ===============================
    const parsedOptions = computed(() => (props.options || []).map(option => {
      if (option && typeof option === 'object') {
        return option;
      }
      return {
        value: option,
        label: option
      };
    }));
    // =============================== Values ===============================
    const [mergedValue, setMergedValue] = useControlledState(props.defaultValue, toRef(props, 'value'));
    const handleChange = (checked, option) => {
      var _a, _b;
      let newValue = null;
      if (props.multiple) {
        const valueList = mergedValue.value || [];
        newValue = checked ? [...valueList, option.value] : valueList.filter(item => item !== option.value);
      } else {
        newValue = checked ? option.value : null;
      }
      setMergedValue(newValue);
      (_a = props['onUpdate:value']) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
      (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, newValue);
    };
    // ================================ Refs ================================
    const divRef = ref();
    expose({
      divRef
    });
    return () => {
      const {
        rootClassName,
        disabled,
        itemClassName,
        itemStyle,
        multiple
      } = props;
      return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
        "ref": divRef,
        "class": [groupPrefixCls.value, hashId.value, rootClassName, {
          [`${groupPrefixCls.value}-disabled`]: disabled,
          [`${groupPrefixCls.value}-rtl`]: direction.value === 'rtl'
        }, attrs.class]
      }), [parsedOptions.value.map(option => _createVNode(CheckableTag, {
        "key": option.value,
        "class": [`${groupPrefixCls.value}-item`, itemClassName],
        "style": itemStyle,
        "checked": multiple ? (mergedValue.value || []).includes(option.value) : mergedValue.value === option.value,
        "onUpdate:checked": checked => handleChange(checked, option),
        "disabled": disabled
      }, {
        default: () => [option.label]
      }))]));
    };
  }
});