/**
 * AppBar Component - Lynx 版 MUI AppBar
 * 应用栏组件
 */
import './AppBar.css'

export type AppBarPosition = 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'
export type AppBarColor = 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent'

export interface AppBarProps {
  /** 定位方式 */
  position?: AppBarPosition
  /** 颜色 */
  color?: AppBarColor
  /** 阴影层级 */
  elevation?: number
  /** 是否启用颜色反转 */
  enableColorOnDark?: boolean
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** sx 属性 */
  sx?: Record<string, any>
}

// 颜色映射
const colorStyles: Record<AppBarColor, Record<string, any>> = {
  default: { backgroundColor: '#1e293b', color: '#f8fafc' },
  inherit: { backgroundColor: 'inherit', color: 'inherit' },
  primary: { backgroundColor: '#667eea', color: '#ffffff' },
  secondary: { backgroundColor: '#764ba2', color: '#ffffff' },
  transparent: { backgroundColor: 'transparent', color: 'inherit' },
}

export function AppBar({
  position = 'fixed',
  color = 'primary',
  elevation = 4,
  children,
  className,
  style,
  sx,
  ...props
}: AppBarProps) {
  const colorStyle = colorStyles[color] || colorStyles.default

  const computedStyle: Record<string, any> = {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    zIndex: 1100,
    ...colorStyle,
    ...(position !== 'static' && { position }),
    ...(position === 'fixed' && { top: 0, left: 0, right: 0 }),
    ...(position === 'sticky' && { top: 0 }),
    ...sx,
    ...style,
  }

  const classes = [
    'MuiAppBar-root',
    `MuiAppBar-position${position.charAt(0).toUpperCase() + position.slice(1)}`,
    `MuiAppBar-color${color.charAt(0).toUpperCase() + color.slice(1)}`,
    className,
  ].filter(Boolean).join(' ')

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

export default AppBar