import { _ as _extends } from '../_rollupPluginBabelHelpers-736b301a.js';
import React__default, { useMemo, useState } from 'react';
import ___default from 'lodash';
import { Popover, Checkbox } from 'antd';
import IconFont from '../IconFont/index.js';
import '@zenview/micro-utils';

function SingleTag(props) {
  let {
    onSelect,
    className = '',
    style,
    isGroup,
    prefix,
    suffix,
    isActive = false,
    selectKeys = [],
    disabled,
    item,
    ...params
  } = props;
  // prettier-ignore
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const flag = useMemo(() => item.children ? ___default.intersection(selectKeys, item.children.map(v => v.code)).length > 0 : selectKeys.indexOf(item.code) > -1, [item, selectKeys.toString()]);
  const codeStr = useMemo(() => item.code && item.code.indexOf && item.code.indexOf(',') > -1 ? item.code.split(',').join('-') : item.code, [item.code]);
  const classNameForCode = useMemo(() => `lm-tag-item-${codeStr}`, [codeStr]);
  const isSelectedClass = useMemo(() => flag || isActive ? `lm-tag-item-selected-${codeStr}` : '', [codeStr, flag, isActive]);
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: `lm-tag-item ${disabled ? 'lm-tag-item-disabled' : ''} ${className} ${classNameForCode} ${isSelectedClass}`,
    style: style,
    onClick: () => !disabled && !isGroup && onSelect && onSelect(item)
  }, params), /*#__PURE__*/React__default.createElement("p", null), prefix, item.label, suffix, /*#__PURE__*/React__default.createElement("style", {
    jsx: "true"
  }, `
          .${classNameForCode} {
            border-color: var(--bd-color);
            color: var(--color-light);
          }
          .${classNameForCode} p {
            border-top-color: var(--bd-color);
            border-left-color: var(--bd-color);
          }
          .${classNameForCode}:not(.lm-tag-item-disabled):hover${isSelectedClass ? ` ,.${isSelectedClass}` : ''} {
            border-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
            color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
          }
          .${classNameForCode}:not(.lm-tag-item-disabled):hover p${isSelectedClass ? ` ,.${isSelectedClass} p` : ''} {
            border-top-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
            border-left-color: ${item.tagColor ? item.tagColor : 'var(--primary)'} !important;
          }
        `));
}

function MutipleTag(props) {
  let {
    onSelect,
    item,
    style,
    selectKeys,
    isActive,
    isMultiple = true,
    disabled
  } = props;
  const RenderComponent = useMemo(() => isMultiple ? MutipleGroupTagContent : SingleGroupTagContent, [isMultiple]);
  const [visible, setVisible] = useState(false);
  function visibleChange(flag) {
    setVisible(flag);
  }
  return /*#__PURE__*/React__default.createElement(Popover, {
    placement: "bottom",
    trigger: "click",
    overlayClassName: "mutiple-tag-popover-box",
    onVisibleChange: visibleChange,
    content: /*#__PURE__*/React__default.createElement(RenderComponent, {
      onSelect: onSelect,
      group: item.children,
      selectKeys: selectKeys,
      disabled: disabled
    })
  }, /*#__PURE__*/React__default.createElement(SingleTag, {
    item: item,
    style: style,
    isActive: isActive,
    disabled: disabled,
    isGroup: true,
    selectKeys: selectKeys,
    suffix: /*#__PURE__*/React__default.createElement(IconFont, {
      className: `tag-popup-allow ${visible ? 'tag-popup-allow-open' : ''}`,
      type: "icon-S_Arrow_SmallDown"
    })
  }));
}
function SingleGroupTagContent({
  group = [],
  onSelect,
  disabled,
  selectKeys = []
}) {
  return /*#__PURE__*/React__default.createElement("ul", {
    className: "mutiple-tag-group"
  }, group.map(v => /*#__PURE__*/React__default.createElement("li", {
    key: v.code,
    className: `${disabled ? 'lm-tag-item-disabled' : ''} ${selectKeys.indexOf(v.code) > -1 ? 'tag-group-item-active' : ''}`,
    onClick: e => {
      e.preventDefault();
      e.stopPropagation();
      !disabled && onSelect(v, group);
    }
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "lm-c-tag-label"
  }, v.label))));
}
function MutipleGroupTagContent({
  group = [],
  onSelect,
  disabled,
  selectKeys = []
}) {
  return /*#__PURE__*/React__default.createElement("ul", {
    className: "mutiple-tag-group mutiple-check-tag-group"
  }, group.map(v => {
    const isActive = selectKeys.indexOf(v.code) > -1;
    return /*#__PURE__*/React__default.createElement("li", {
      key: v.code,
      className: `${disabled ? 'lm-tag-item-disabled' : ''} ${isActive ? 'tag-group-item-active' : ''}`,
      onClick: e => {
        e.preventDefault();
        e.stopPropagation();
        !disabled && onSelect(v);
      }
    }, /*#__PURE__*/React__default.createElement(Checkbox, {
      disabled: disabled,
      checked: isActive
    }), /*#__PURE__*/React__default.createElement("span", {
      className: "lm-c-tag-label"
    }, v.label));
  }));
}

function TagView({
  tags,
  onSelect
}) {
  return /*#__PURE__*/React__default.createElement("div", {
    className: "tag-label-view"
  }, tags.length > 0 ? tags.map(item => /*#__PURE__*/React__default.createElement(SingleTag, {
    key: item.code,
    item: item,
    isActive: true,
    onSelect: onSelect,
    style: {
      cursor: onSelect ? 'pointer' : 'unset',
      margin: '8px 8px 8px 0'
    }
  })) : /*#__PURE__*/React__default.createElement("div", {
    className: "no-label"
  }, "\u6682\u65E0\u6807\u7B7E"));
}

const Tags = {
  SingleTag,
  MutipleTag,
  TagView
};

export { Tags as default };
//# sourceMappingURL=index.js.map
