import React, { useMemo, isValidElement, cloneElement, Children } from 'react';
import PisellFooter from "../../pisellLayout/footer";
import PisellModal from "../../pisellModal";
import FooterActions from "./FooterActions";
import { mergeClassNames, modifierClassName } from "../utils";

/**
 * ProcedureFooter 子组件 Props
 */

/**
 * ProcedureFooter 底部操作区组件
 * 
 * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
 * @author Pisell Team
 */
var ProcedureFooter = function ProcedureFooter(_ref) {
  var footerProps = _ref.footerProps,
    position = _ref.position,
    className = _ref.className,
    _ref$isGlobal = _ref.isGlobal,
    isGlobal = _ref$isGlobal === void 0 ? false : _ref$isGlobal,
    sidebarContent = _ref.sidebarContent,
    _ref$summaryModalOpen = _ref.summaryModalOpen,
    summaryModalOpen = _ref$summaryModalOpen === void 0 ? false : _ref$summaryModalOpen,
    onOpenSummaryModal = _ref.onOpenSummaryModal,
    onCloseSummaryModal = _ref.onCloseSummaryModal,
    goPrev = _ref.goPrev,
    goNext = _ref.goNext,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
  /** 底部区域类名 */
  var footerCls = useMemo(function () {
    return mergeClassNames('pisell-procedure-footer', className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, modifierClassName('pisell-procedure-footer', position));
  }, [className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, position]);

  /**
   * 处理操作按钮
   * @description 根据 data-action 属性注入对应的事件
   * - data-action="prev"：注入上一步事件（goPrev）
   * - data-action="next"：注入下一步事件（goNext）
   * - 无 data-action 且是最后一个按钮：默认注入下一步事件（goNext）
   */
  var processedActions = useMemo(function () {
    var actions = footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions;
    if (!actions) return null;

    // 将 actions 转换为数组
    var childrenArray = Children.toArray(actions);
    if (childrenArray.length === 0) return null;

    // 处理每个子元素
    return Children.map(actions, function (child, index) {
      // 不是有效的 React 元素，直接返回
      if (! /*#__PURE__*/isValidElement(child)) return child;
      var childProps = child.props;
      var dataAction = childProps === null || childProps === void 0 ? void 0 : childProps['data-action'];
      var originalOnClick = childProps === null || childProps === void 0 ? void 0 : childProps.onClick;

      // 根据 data-action 属性决定注入哪个事件
      var injectedAction;
      if (dataAction === 'prev') {
        injectedAction = goPrev;
      } else if (dataAction === 'next') {
        injectedAction = goNext;
      }

      // 如果需要注入事件，则包装 onClick
      if (injectedAction) {
        return /*#__PURE__*/cloneElement(child, {
          onClick: function onClick() {
            var _injectedAction;
            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
              args[_key] = arguments[_key];
            }
            // 先执行原有的 onClick
            originalOnClick === null || originalOnClick === void 0 || originalOnClick.apply(void 0, args);
            // 再执行注入的事件
            (_injectedAction = injectedAction) === null || _injectedAction === void 0 || _injectedAction();
          }
        });
      }
      return child;
    });
  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions, goPrev, goNext]);

  /** 获取操作按钮内容 */
  var actionsContent = processedActions;

  /**
   * 包装 summaryButton 添加点击事件
   * 如果用户传入的按钮已有 onClick，则先执行用户的 onClick，再打开弹窗
   */
  var wrappedSummaryButton = useMemo(function () {
    var _button$props;
    var button = footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton;
    if (!button || ! /*#__PURE__*/isValidElement(button)) return button;
    var originalOnClick = (_button$props = button.props) === null || _button$props === void 0 ? void 0 : _button$props.onClick;
    return /*#__PURE__*/cloneElement(button, {
      onClick: function onClick(e) {
        // 先执行原有的点击事件
        if (typeof originalOnClick === 'function') {
          originalOnClick(e);
        }
        // 打开弹窗
        onOpenSummaryModal === null || onOpenSummaryModal === void 0 || onOpenSummaryModal();
      }
    });
  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton, onOpenSummaryModal]);

  /** 渲染底部操作区内容 */
  var footerContent = useMemo(function () {
    // 弹窗模式下不显示移动端总结按钮
    var hasSummaryButton = mode === 'modal' ? false : !!wrappedSummaryButton;
    var hasLeftSlot = (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== undefined && (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== null;
    var hasActions = actionsContent !== null && actionsContent !== undefined;

    // 如果没有任何内容，返回 null
    if (!hasSummaryButton && !hasLeftSlot && !hasActions) {
      return null;
    }
    return /*#__PURE__*/React.createElement(React.Fragment, null, hasSummaryButton && wrappedSummaryButton && /*#__PURE__*/React.createElement("div", {
      className: "pisell-procedure-footer__summary"
    }, wrappedSummaryButton), (hasLeftSlot || hasActions) && ((footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow) !== false ? /*#__PURE__*/React.createElement(FooterActions, {
      leftSlot: footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot,
      moreText: footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText
    }, actionsContent) : /*#__PURE__*/React.createElement("div", {
      className: "pisell-procedure-footer__content"
    }, (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) && /*#__PURE__*/React.createElement("div", {
      className: "pisell-procedure-footer__left"
    }, footerProps.leftSlot), hasActions && /*#__PURE__*/React.createElement("div", {
      className: "pisell-procedure-footer__actions"
    }, actionsContent))));
  }, [mode, wrappedSummaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow, footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot, footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText, actionsContent]);

  /** 移动端信息区弹窗 */
  var summaryModal = useMemo(function () {
    if (!(footerProps !== null && footerProps !== void 0 && footerProps.summaryButton) || !sidebarContent) return null;
    return /*#__PURE__*/React.createElement(PisellModal, {
      open: summaryModalOpen,
      onCancel: onCloseSummaryModal,
      title: (footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryModalTitle) || '详情',
      platform: "h5",
      footer: null,
      destroyOnClose: true
    }, sidebarContent);
  }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryModalTitle, sidebarContent, summaryModalOpen, onCloseSummaryModal]);

  // 如果没有内容，不渲染底部区域
  if (!footerContent) {
    return null;
  }

  // 全局底部使用 PisellFooter 组件包裹
  if (isGlobal) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellFooter, {
      className: footerCls,
      style: footerProps === null || footerProps === void 0 ? void 0 : footerProps.style
    }, footerContent), summaryModal);
  }

  // 内嵌底部使用 div 包裹
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: footerCls,
    style: footerProps === null || footerProps === void 0 ? void 0 : footerProps.style
  }, footerContent), summaryModal);
};
ProcedureFooter.displayName = 'ProcedureFooter';
export default ProcedureFooter;