import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx } from 'react/jsx-runtime';
import { useRef } from 'react';
import { Button } from '../Button/index.js';
import { UUID } from '@iam-com/lib';
import clsx from 'clsx';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import AutoTips from '../AutoTips/index.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/typeof-498dd2b1.js';
import '../_verture/slicedToArray-76060636.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '@iam-com/icons/LoadingF';
import '@iam-com/icons/Forbid';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import '@iam-com/icons/Down';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '../_verture/useFormatMessage-703f8b20.js';
import '@para-ui/core/GlobalContext';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-toggle-button.paraui-v3-button {\n  height: 30px;\n  padding: 0 20px;\n  color: rgb(46, 55, 67);\n  line-height: 30px;\n}\n.paraui-v3-toggle-button.paraui-v3-button:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-v3-toggle-button .toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]::before {\n  border-color: rgba(46, 55, 67, 0.4);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 10px solid rgb(54, 102, 214);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::after {\n  content: \" \";\n  position: absolute;\n  bottom: 2px;\n  right: 3px;\n  width: 4px;\n  height: 8px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  border-radius: 2px;\n  transform: rotate(45deg);\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button {\n  color: rgba(46, 55, 67, 0.4);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button:hover {\n  color: rgba(46, 55, 67, 0.4);\n}\n\n.paraui-v3-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-v3-togglebutton-group .paraui-v3-toggle-button {\n  margin: 0 10px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button ~ .paraui-v3-toggle-button::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected {\n  color: rgb(54, 102, 214);\n  border: 0;\n  font-weight: 700;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected::after {\n  display: none;\n}";
styleInject(css_248z);

//切换按钮组
var ToggleButtonGroup = function ToggleButtonGroup(props) {
  var _props$type = props.type,
    type = _props$type === void 0 ? 'outlined' : _props$type,
    className = props.className,
    style = props.style,
    _props$exclusive = props.exclusive,
    exclusive = _props$exclusive === void 0 ? false : _props$exclusive,
    _props$toggleable = props.toggleable,
    toggleable = _props$toggleable === void 0 ? true : _props$toggleable,
    data = props.data,
    value = props.value,
    onChange = props.onChange;
  if (type === 'text' && !('exclusive' in props)) {
    exclusive = true;
  }
  var makeCls = clsx("".concat($prefixCls, "-togglebutton-group"), className, _defineProperty({}, "".concat($prefixCls, "-togglebutton-group-text"), type === 'text'));
  //多选
  var handleChange = function handleChange(evt, buttonValue) {
    if (!onChange) return;
    var index = value && (value === null || value === void 0 ? void 0 : value.indexOf(buttonValue));
    var newValue;
    if (value && index >= 0) {
      newValue = value.slice();
      newValue.splice(index, 1);
    } else {
      newValue = value ? value.concat(buttonValue) : [buttonValue];
    }
    onChange(evt, newValue);
  };
  //单选
  var handleExclusiveChange = function handleExclusiveChange(evt, buttonValue) {
    if (!onChange) return;
    if (!toggleable) {
      if (value === buttonValue) return;
      onChange(evt, buttonValue);
      return;
    }
    onChange(evt, value === buttonValue ? null : buttonValue);
  };
  //是否选中
  var hasValueSelected = function hasValueSelected(value, candidate) {
    if (candidate === undefined || value === undefined) return false;
    if (Array.isArray(candidate)) {
      return candidate.includes(value);
    }
    return value === candidate;
  };
  //渲染组
  var renderGroup = function renderGroup() {
    if (!data || !(data === null || data === void 0 ? void 0 : data.length)) return null;
    return data.map(function (item, idx) {
      var label = item.label,
        selected = item.selected,
        rest = __rest(item, ["label", "selected"]);
      var hasSelected = selected === undefined ? hasValueSelected(rest.value, value) : selected;
      return jsx(ToggleButton, Object.assign({}, rest, {
        style: style,
        selected: hasSelected,
        autoToolTipOverflow: type !== 'text',
        variant: type === 'text' ? 'text' : 'outlined',
        onClick: exclusive ? handleExclusiveChange : handleChange
      }, {
        children: label
      }), idx);
    });
  };
  return jsx("div", Object.assign({
    className: makeCls
  }, {
    children: renderGroup()
  }));
};

//切换按钮
var ToggleButton = function ToggleButton(props) {
  var _clsx;
  var className = props.className,
    style = props.style,
    children = props.children,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$selected = props.selected,
    selected = _props$selected === void 0 ? false : _props$selected,
    value = props.value;
    props.autoToolTipOverflow;
    var _props$width = props.width,
    width = _props$width === void 0 ? 120 : _props$width,
    onClick = props.onClick,
    restProps = __rest(props, ["className", "style", "children", "disabled", "selected", "value", "autoToolTipOverflow", "width", "onClick"]);
  // const [hasTip, setHasTip] = useState<boolean>(false);
  var id = useRef(UUID()).current;
  var prefixCls = "".concat($prefixCls, "-toggle-button");
  //className
  var makeCls = clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-selected"), selected), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _clsx));
  //点击事件
  var handleClick = function handleClick(evt) {
    if (onClick) onClick(evt, value);
  };
  // useLayoutEffect(() => {
  //     if (!autoToolTipOverflow) return;
  //     let btn: HTMLButtonElement | null = document.querySelector(`[data-id="${id}"]`);
  //     if (!btn) return;
  //     let span: any = document.createElement('span');
  //     span.textContent = children;
  //     document.body.appendChild(span);
  //     if (span.offsetWidth > (btn.offsetWidth - 16 * 2)) {
  //         setHasTip(true);
  //     }
  //     span?.remove();
  // }, []);
  //渲染
  // const renderToggleButton = () => {
  //     let btn = (
  //         <Button
  //             data-id={id}
  //             variant={'outlined'}
  //             size={'medium'}
  //             {...restProps}
  //             style={{ width, ...style }}
  //             className={makeCls}
  //             disabled={disabled}
  //             value={value}
  //             onClick={handleClick}>
  //             <span className={'toggle-button-text'}>
  //                 {children}
  //             </span>
  //         </Button>
  //     );
  //     if (hasTip) {
  //         return (
  //             <Tooltip title={children as string}>
  //                 <span className={`${prefixCls}-wrap`}>
  //                     {btn}
  //                 </span>
  //             </Tooltip>
  //         );
  //     }
  //     return btn;
  // };
  return jsx(Button, Object.assign({
    "data-id": id,
    variant: 'outlined',
    size: 'medium'
  }, restProps, {
    style: Object.assign({
      width: width
    }, style),
    className: makeCls,
    disabled: disabled,
    value: value,
    onClick: handleClick
  }, {
    children: jsx("span", Object.assign({
      className: 'toggle-button-text'
    }, {
      children: jsx(AutoTips, {
        children: children
      })
    }))
  }));
};

export { ToggleButton, ToggleButtonGroup, ToggleButton as default };
