"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
require("../_util/type");
var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
var _style = _interopRequireDefault(require("./style"));
var _useControlledState = _interopRequireDefault(require("../_util/hooks/useControlledState"));
var _CheckableTag = _interopRequireDefault(require("./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
});
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'ACheckableTagGroup',
  inheritAttrs: false,
  props: checkableTagGroupProps(),
  setup(props, {
    attrs,
    expose
  }) {
    const {
      prefixCls,
      direction
    } = (0, _useConfigInject.default)('tag', props);
    const groupPrefixCls = (0, _vue.computed)(() => `${prefixCls.value}-checkable-group`);
    // Style
    const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
    // =============================== Option ===============================
    const parsedOptions = (0, _vue.computed)(() => (props.options || []).map(option => {
      if (option && typeof option === 'object') {
        return option;
      }
      return {
        value: option,
        label: option
      };
    }));
    // =============================== Values ===============================
    const [mergedValue, setMergedValue] = (0, _useControlledState.default)(props.defaultValue, (0, _vue.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 = (0, _vue.ref)();
    expose({
      divRef
    });
    return () => {
      const {
        rootClassName,
        disabled,
        itemClassName,
        itemStyle,
        multiple
      } = props;
      return wrapSSR((0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 => (0, _vue.createVNode)(_CheckableTag.default, {
        "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]
      }))]));
    };
  }
});