import React from 'react';
import { Dropdown, Button } from 'antd';
import UpOutlined from '@ant-design/icons/UpOutlined';
import { useOverflowActions } from "../hooks/useOverflowActions";
import { mergeClassNames } from "../utils";
import { getText } from "../../../locales";

/**
 * FooterActions 底部操作区组件 Props
 */

/**
 * FooterActions 底部操作区组件
 * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
 * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
 * @author Pisell Team
 */
var FooterActions = function FooterActions(_ref) {
  var leftSlot = _ref.leftSlot,
    children = _ref.children,
    className = _ref.className,
    moreText = _ref.moreText,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 16 : _ref$gap;
  var _useOverflowActions = useOverflowActions({
      children: children,
      gap: gap,
      moreText: moreText
    }),
    containerRef = _useOverflowActions.containerRef,
    measureRef = _useOverflowActions.measureRef,
    moreButtonRef = _useOverflowActions.moreButtonRef,
    leftSlotRef = _useOverflowActions.leftSlotRef,
    actionItems = _useOverflowActions.actionItems,
    visibleActions = _useOverflowActions.visibleActions,
    hasOverflow = _useOverflowActions.hasOverflow,
    moreMenuItems = _useOverflowActions.moreMenuItems;

  /** 容器类名 */
  var containerCls = mergeClassNames('pisell-procedure-footer__content', className);

  /** 是否有左侧内容 */
  var hasLeftSlot = leftSlot !== undefined && leftSlot !== null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: measureRef,
    style: {
      position: 'absolute',
      visibility: 'hidden',
      pointerEvents: 'none',
      display: 'flex',
      gap: gap,
      whiteSpace: 'nowrap',
      left: -9999,
      top: -9999
    },
    "aria-hidden": "true"
  }, actionItems.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      "data-measure-item": true,
      style: {
        flexShrink: 0
      }
    }, item);
  })), /*#__PURE__*/React.createElement("div", {
    ref: moreButtonRef,
    style: {
      position: 'absolute',
      visibility: 'hidden',
      pointerEvents: 'none',
      left: -9999,
      top: -9999
    },
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(UpOutlined, null)
  }, moreText)), /*#__PURE__*/React.createElement("div", {
    ref: containerRef,
    className: containerCls,
    style: {
      gap: gap
    }
  }, hasLeftSlot && /*#__PURE__*/React.createElement("div", {
    ref: leftSlotRef,
    className: "pisell-procedure-footer__left"
  }, leftSlot), /*#__PURE__*/React.createElement("div", {
    className: "pisell-procedure-footer__actions",
    style: {
      gap: gap
    }
  }, hasOverflow && /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: moreMenuItems
    }
  }, /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(UpOutlined, null)
  }, moreText || getText('pisell-procedure-footer-more'))), visibleActions)));
};
FooterActions.displayName = 'FooterActions';
export default FooterActions;