import './SplitLayout.css'

/**
 * 主内容区布局组件
 * @param {Object} props
 * @param {string} props.direction - 布局方向：'horizontal'（左右）| 'vertical'（上下）
 * @param {ReactNode} props.mainContent - 主内容区
 * @param {ReactNode} props.extendContent - 扩展内容区
 * @param {number} props.extendSize - 扩展区尺寸（horizontal 模式下为宽度，px）
 * @param {number} props.gap - 主内容与扩展区间距（px）
 * @param {boolean} props.showExtend - 是否显示扩展区
 * @param {string} props.extendPosition - 扩展区位置（horizontal: 'right', vertical: 'top'）
 * @param {string} props.className - 自定义类名
 *
 * @deprecated 旧参数（向后兼容）：leftContent, rightContent, rightWidth, showRight
 */
function SplitLayout({
  // 新 API
  direction = 'horizontal',
  mainContent,
  extendContent,
  extendSize = 360,
  gap = 16,
  showExtend = true,
  extendPosition,
  className = '',
  // 旧 API（向后兼容）
  leftContent,
  rightContent,
  rightWidth,
  showRight,
}) {
  // 向后兼容：如果使用旧 API，转换为新 API
  const actualMainContent = mainContent || leftContent
  const actualExtendContent = extendContent || rightContent
  const actualExtendSize = extendSize !== 360 ? extendSize : (rightWidth || 360)
  const actualShowExtend = showExtend !== undefined ? showExtend : (showRight !== undefined ? showRight : true)
  const actualDirection = direction
  const actualExtendPosition = extendPosition || (actualDirection === 'horizontal' ? 'right' : 'top')

  return (
    <div
      className={`split-layout split-layout-${actualDirection} ${className}`}
      style={{ gap: `${gap}px` }}
    >
      {/* 纵向布局且扩展区在顶部时，先渲染扩展区 */}
      {actualDirection === 'vertical' && actualExtendPosition === 'top' && actualShowExtend && actualExtendContent && (
        <div className="split-layout-extend split-layout-extend-top">
          {actualExtendContent}
        </div>
      )}

      {/* 主内容区 */}
      <div className="split-layout-main">{actualMainContent}</div>

      {/* 横向布局时，扩展区在右侧 */}
      {actualDirection === 'horizontal' && actualShowExtend && actualExtendContent && (
        <div
          className="split-layout-extend split-layout-extend-right"
          style={{ width: `${actualExtendSize}px` }}
        >
          {actualExtendContent}
        </div>
      )}
    </div>
  )
}

export default SplitLayout