import { ConfigProvider } from "antd";
import React, { forwardRef, useContext, useImperativeHandle } from "react";
import { LayoutHeader } from "../Components/LayoutHeader";
import useAutoScroll from "../Hooks/useAutoScroll";
import { useStyle } from "./style";
/**
 * ChatLayout 组件 - 聊天布局组件
 *
 * 该组件提供了一个完整的聊天界面布局，包含头部区域、内容区域和底部区域。
 * 头部区域包含标题、左侧折叠按钮、分享按钮和右侧折叠按钮。
 * 内容区域用于放置对话内容（如 BubbleList）。
 * 底部区域固定在底部，用于放置输入框或AI对话按钮等组件。
 *
 * @component
 * @description 聊天布局组件，提供完整的对话界面布局
 * @param {ChatLayoutProps} props - 组件属性
 *
 * @example
 * ```tsx
 * import { ChatLayout } from './ChatLayout';
 *
 * // 基本用法
 * <ChatLayout
 *   header={{
 *     title: "AI 助手",
 *     onLeftCollapse: () => console.log('左侧折叠'),
 *     onRightCollapse: () => console.log('右侧折叠'),
 *     onShare: () => console.log('分享')
 *   }}
 * >
 *   <div>对话内容</div>
 * </ChatLayout>
 *
 * // 受控模式 - 折叠状态
 * <ChatLayout
 *   header={{
 *     title: "AI 助手",
 *     leftCollapsed: leftCollapsed,
 *     rightCollapsed: rightCollapsed,
 *     onLeftCollapse: setLeftCollapsed,
 *     onRightCollapse: setRightCollapsed
 *   }}
 * >
 *   <div>对话内容</div>
 * </ChatLayout>
 *
 * // 非受控模式 - 默认折叠状态
 * <ChatLayout
 *   header={{
 *     title: "AI 助手",
 *     leftDefaultCollapsed: true,
 *     rightDefaultCollapsed: false,
 *     onLeftCollapse: (collapsed) => console.log('左侧折叠状态:', collapsed),
 *     onRightCollapse: (collapsed) => console.log('右侧折叠状态:', collapsed)
 *   }}
 * >
 *   <div>对话内容</div>
 * </ChatLayout>
 *
 * // 自定义底部
 * <ChatLayout
 *   header={{ title: "AI 助手" }}
 *   footer={<div>自定义底部内容</div>}
 * >
 *   <div>对话内容</div>
 * </ChatLayout>
 * ```
 *
 * @returns {React.ReactElement} 渲染的聊天布局组件
 */ var ChatLayout = /*#__PURE__*/ forwardRef(function(param, ref) {
    var header = param.header, children = param.children, footer = param.footer, className = param.className, style = param.style;
    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
    var prefixCls = getPrefixCls('chat-layout');
    var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
    var containerRef = useAutoScroll({
        SCROLL_TOLERANCE: 30,
        onResize: function() {},
        timeout: 200
    }).containerRef;
    useImperativeHandle(ref, function() {
        return {
            scrollContainer: containerRef.current
        };
    });
    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
        className: "".concat(prefixCls, " ").concat(className || '', " ").concat(hashId),
        style: style
    }, header && /*#__PURE__*/ React.createElement(LayoutHeader, header), /*#__PURE__*/ React.createElement("div", {
        className: "".concat(prefixCls, "-content ").concat(hashId)
    }, /*#__PURE__*/ React.createElement("div", {
        className: "".concat(prefixCls, "-content-scrollable ").concat(hashId),
        ref: containerRef
    }, children)), footer && /*#__PURE__*/ React.createElement("div", {
        className: "".concat(prefixCls, "-footer ").concat(hashId)
    }, footer)));
});
// 保持向后兼容，导出 ChatFlowHeader 作为 LayoutHeader 的别名
export { LayoutHeader as ChatFlowHeader } from "../Components/LayoutHeader";
export { ChatLayout };
