import { useState } from 'react'
import { UpOutlined, DownOutlined } from '@ant-design/icons'
import './ExtendInfoPanel.css'

/**
 * 扩展信息面板组件
 * @param {Object} props
 * @param {Array} props.sections - 信息区块配置数组
 * @param {string} props.sections[].key - 区块唯一键
 * @param {string} props.sections[].title - 区块标题
 * @param {ReactNode} props.sections[].icon - 标题图标
 * @param {ReactNode} props.sections[].content - 区块内容
 * @param {boolean} props.sections[].defaultCollapsed - 默认是否折叠
 * @param {boolean} props.sections[].hideTitleBar - 是否隐藏该区块的标题栏（默认 false）
 * @param {string} props.layout - 布局方式：'vertical'（垂直堆叠）| 'horizontal'（水平排列）
 * @param {string} props.className - 自定义类名
 */
function ExtendInfoPanel({ sections = [], layout = 'vertical', className = '' }) {
  const [collapsedSections, setCollapsedSections] = useState(() => {
    const initial = {}
    sections.forEach((section) => {
      if (section.defaultCollapsed) {
        initial[section.key] = true
      }
    })
    return initial
  })

  const toggleSection = (key) => {
    setCollapsedSections((prev) => ({
      ...prev,
      [key]: !prev[key],
    }))
  }

  return (
    <div className={`extend-info-panel extend-info-panel-${layout} ${className}`}>
      {sections.map((section) => {
        const isCollapsed = collapsedSections[section.key]
        const hideTitleBar = section.hideTitleBar === true

        return (
          <div key={section.key} className="extend-info-section">
            {/* 区块头部 - 可配置隐藏 */}
            {!hideTitleBar && (
              <div className="extend-info-section-header" onClick={() => toggleSection(section.key)}>
                <div className="extend-info-section-title">
                  {section.icon && <span className="extend-info-section-icon">{section.icon}</span>}
                  <span>{section.title}</span>
                </div>
                <button className="extend-info-section-toggle" type="button">
                  {isCollapsed ? <DownOutlined /> : <UpOutlined />}
                </button>
              </div>
            )}

            {/* 区块内容 - 如果隐藏标题栏则总是显示，否则根据折叠状态 */}
            {(hideTitleBar || !isCollapsed) && (
              <div className="extend-info-section-content">{section.content}</div>
            )}
          </div>
        )
      })}
    </div>
  )
}

export default ExtendInfoPanel