/**
 * Container Component - Lynx 版 MUI Container
 * 一比一对应 MUI Container
 * 
 * 水平居中的响应式容器组件
 * 支持：
 * - maxWidth: xs, sm, md, lg, xl
 * - fixed: 固定宽度
 * - disableGutters: 禁用左右内边距
 */
import './Container.css'

// =============================================
// Container 类型定义
// =============================================
export type ContainerMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false

export interface ContainerProps {
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** 最大宽度 */
  maxWidth?: ContainerMaxWidth | string
  /** 是否固定宽度 */
  fixed?: boolean
  /** 是否禁用左右内边距 */
  disableGutters?: boolean
  /** sx 属性 */
  sx?: Record<string, any>
}

// =============================================
// 断点宽度映射 - 对应 MUI breakpoints
// =============================================
const maxWidthValues: Record<string, number> = {
  xs: 444,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1536,
}

// =============================================
// Container 类名
// =============================================
export const containerClasses = {
  root: 'MuiContainer-root',
  maxWidthXs: 'MuiContainer-maxWidthXs',
  maxWidthSm: 'MuiContainer-maxWidthSm',
  maxWidthMd: 'MuiContainer-maxWidthMd',
  maxWidthLg: 'MuiContainer-maxWidthLg',
  maxWidthXl: 'MuiContainer-maxWidthXl',
  fixed: 'MuiContainer-fixed',
  disableGutters: 'MuiContainer-disableGutters',
}

// =============================================
// Container 组件实现
// =============================================
export function Container(props: ContainerProps) {
  const {
    children,
    className,
    style,
    maxWidth = 'lg',
    fixed = false,
    disableGutters = false,
    sx,
    ...other
  } = props

  // 获取最大宽度值
  const maxWidthValue = maxWidth
    ? typeof maxWidth === 'string' && maxWidthValues[maxWidth]
      ? maxWidthValues[maxWidth]
      : maxWidth
    : undefined

  // 构建类名
  const classes = [
    containerClasses.root,
    maxWidth && `MuiContainer-maxWidth${capitalize(String(maxWidth))}`,
    fixed && containerClasses.fixed,
    disableGutters && containerClasses.disableGutters,
    className,
  ].filter(Boolean).join(' ')

  // 计算样式
  const computedStyle: Record<string, any> = {
    width: '100%',
    marginLeft: 'auto',
    marginRight: 'auto',
    ...(!disableGutters && { paddingLeft: 16, paddingRight: 16 }),
    ...(maxWidthValue && { maxWidth: maxWidthValue }),
    ...sx,
    ...style,
  }

  return (
    <view className={classes} style={computedStyle} {...other}>
      {children}
    </view>
  )
}

// 辅助函数
function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

export default Container