import React, { useMemo, useEffect } from 'react';
import PisellSider from "../../pisellLayout/sider";
import { mergeClassNames } from "../utils";
import { useElementSize, useSidebarHeight } from "../hooks";

/**
 * ProcedureSidebar 子组件 Props
 */

/**
 * ProcedureSidebar 信息区组件
 *
 * @description 流程容器的信息区（侧边栏），用于展示摘要信息
 * @author Pisell Team
 */
var ProcedureSidebar = function ProcedureSidebar(_ref) {
  var className = _ref.className,
    style = _ref.style,
    children = _ref.children,
    extra = _ref.extra,
    _ref$isRatioMode = _ref.isRatioMode,
    isRatioMode = _ref$isRatioMode === void 0 ? false : _ref$isRatioMode,
    containerSelector = _ref.containerSelector,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
    _ref$direction = _ref.direction,
    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
    containerSize = _ref.containerSize,
    responsiveClsComputed = _ref.responsiveClsComputed;
  // 垂直布局下不需要计算高度
  var isVertical = direction === 'vertical';
  // 获取 header 高度（垂直布局下不需要）
  var headerSize = useElementSize({
    selector: '.pisell-procedure-header',
    enabled: !isVertical
  });

  // 计算全局 footer 的高度（垂直布局下不需要）
  var floatAllFooterSize = useElementSize({
    selector: '.pisell-procedure-footer--float-all',
    enabled: !isVertical
  });
  var fixedBottomFooterSize = useElementSize({
    selector: '.pisell-procedure-footer--fixed-bottom',
    enabled: !isVertical
  });
  var footerHeight = Math.max((floatAllFooterSize === null || floatAllFooterSize === void 0 ? void 0 : floatAllFooterSize.height) || 0, (fixedBottomFooterSize === null || fixedBottomFooterSize === void 0 ? void 0 : fixedBottomFooterSize.height) || 0);
  var containerWidth = (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0;

  // 设置 CSS 变量 --pisell-procedure-container-width，供样式文件使用
  useEffect(function () {
    if (typeof document === 'undefined') return;
    var root = document.documentElement;
    if (containerWidth > 0) {
      root.style.setProperty('--pisell-procedure-container-width', "".concat(containerWidth, "px"));
    }
    return function () {
      root.style.removeProperty('--pisell-procedure-container-width');
    };
  }, [containerWidth]);

  // 检查所有尺寸是否已稳定（垂直布局下始终返回 false，不计算高度）
  var isSizeStable = useMemo(function () {
    // 垂直布局下不需要计算高度
    if (isVertical) {
      return false;
    }
    if (!(headerSize !== null && headerSize !== void 0 && headerSize.height) || headerSize.height === 0) {
      return false;
    }
    if (containerSelector && containerSelector.trim()) {
      return (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) > 0 && (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) > 0;
    }
    return true;
  }, [isVertical, containerSelector, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.height, headerSize === null || headerSize === void 0 ? void 0 : headerSize.height]);

  // 使用自定义 Hook 计算高度（垂直布局下不需要）
  var siderHeight = useSidebarHeight(isSizeStable, {
    containerSelector: containerSelector,
    containerHeight: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height,
    headerHeight: headerSize === null || headerSize === void 0 ? void 0 : headerSize.height,
    footerHeight: footerHeight
  });

  // 仅在 modal 模式下应用响应式类名
  var responsiveCls = mode === 'modal' ? responsiveClsComputed : '';

  // 信息区类名
  var sidebarCls = useMemo(function () {
    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio'
    // responsiveCls
    );
  }, [className, isRatioMode, responsiveCls]);
  var _height = useMemo(function () {
    if (mode === 'modal') {
      return '100%';
    }
    if (siderHeight && siderHeight > 0) {
      return "".concat(siderHeight, "px");
    }
  }, [mode, siderHeight]);
  return /*#__PURE__*/React.createElement(PisellSider, {
    className: sidebarCls
    // style={{
    //   ...style,
    //   overflow: 'hidden',
    //   ...(_height && { height: _height }),
    // }}
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-procedure-sider-content-top"
  }, children), extra);
};
ProcedureSidebar.displayName = 'ProcedureSidebar';
export default ProcedureSidebar;