/**
 * Typography Component - Lynx 版 MUI Typography
 * 用于显示文本内容
 */
import './Typography.css'

// Typography 变体类型
export type TypographyVariant = 
  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  | 'subtitle1' | 'subtitle2'
  | 'body1' | 'body2'
  | 'button' | 'caption' | 'overline'
  | 'inherit'

// 文本对齐类型
export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'inherit'

// 颜色类型
export type TypographyColor = 
  | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
  | 'textPrimary' | 'textSecondary' | 'textDisabled'
  | 'inherit'

export interface TypographyProps {
  /** 变体 */
  variant?: TypographyVariant
  /** 文本对齐 */
  align?: TextAlign
  /** 颜色 */
  color?: TypographyColor | string
  /** 是否不换行 */
  noWrap?: boolean
  /** 底部边距 */
  gutterBottom?: boolean
  /** 是否为段落 */
  paragraph?: boolean
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** sx 属性 */
  sx?: Record<string, any>
  /** 点击事件 */
  bindtap?: () => void
}

// 变体样式映射
const variantStyles: Record<TypographyVariant, Record<string, any>> = {
  h1: { fontSize: 96, fontWeight: '300', lineHeight: 1.167 },
  h2: { fontSize: 60, fontWeight: '300', lineHeight: 1.2 },
  h3: { fontSize: 48, fontWeight: '400', lineHeight: 1.167 },
  h4: { fontSize: 34, fontWeight: '400', lineHeight: 1.235 },
  h5: { fontSize: 24, fontWeight: '400', lineHeight: 1.334 },
  h6: { fontSize: 20, fontWeight: '500', lineHeight: 1.6 },
  subtitle1: { fontSize: 16, fontWeight: '400', lineHeight: 1.75 },
  subtitle2: { fontSize: 14, fontWeight: '500', lineHeight: 1.57 },
  body1: { fontSize: 16, fontWeight: '400', lineHeight: 1.5 },
  body2: { fontSize: 14, fontWeight: '400', lineHeight: 1.43 },
  button: { fontSize: 14, fontWeight: '500', lineHeight: 1.75 },
  caption: { fontSize: 12, fontWeight: '400', lineHeight: 1.66 },
  overline: { fontSize: 12, fontWeight: '400', lineHeight: 2.66 },
  inherit: {},
}

// 颜色映射
const colorMap: Record<string, string> = {
  primary: '#667eea',
  secondary: '#764ba2',
  error: '#ef4444',
  warning: '#f59e0b',
  info: '#3b82f6',
  success: '#10b981',
  textPrimary: '#f8fafc',
  textSecondary: '#94a3b8',
  textDisabled: '#64748b',
  inherit: 'inherit',
}

export function Typography({
  variant = 'body1',
  align = 'inherit',
  color = 'textPrimary',
  noWrap = false,
  gutterBottom = false,
  paragraph = false,
  children,
  className,
  style,
  sx,
  ...props
}: TypographyProps) {
  // 计算样式
  const variantStyle = variantStyles[variant] || {}
  const textColor = colorMap[color] || color
  
  const computedStyle: Record<string, any> = {
    ...variantStyle,
    color: textColor,
    ...(align !== 'inherit' && { textAlign: align }),
    ...(noWrap && { 
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    }),
    ...(gutterBottom && { marginBottom: '0.35em' }),
    ...(paragraph && { marginBottom: 16 }),
    ...sx,
    ...style,
  }

  // 构建类名
  const classes = [
    'MuiTypography-root',
    `MuiTypography-${variant}`,
    align !== 'inherit' && `MuiTypography-align${align.charAt(0).toUpperCase() + align.slice(1)}`,
    noWrap && 'MuiTypography-noWrap',
    gutterBottom && 'MuiTypography-gutterBottom',
    paragraph && 'MuiTypography-paragraph',
    className,
  ].filter(Boolean).join(' ')

  return (
    <text 
      className={classes}
      style={computedStyle}
      {...props}
    >
      {children}
    </text>
  )
}

export default Typography