/**
 * ButtonBase Component - Lynx 版 MUI ButtonBase
 * 一比一对应 MUI ButtonBase
 * 
 * ButtonBase 是所有按钮组件的基础，提供：
 * - 样式重置
 * - 禁用状态处理
 * - 焦点可见状态
 * - 点击事件处理
 * - 涟漪效果（使用 CSS @keyframes 动画实现）
 */
import './ButtonBase.css'
import '../TouchRipple/TouchRipple.css'

// =============================================
// ButtonBase 类型定义
// =============================================
export interface ButtonBaseProps {
  /** 子元素 */
  children?: any
  /** 自定义类名 */
  className?: string
  /** 内联样式 */
  style?: Record<string, any>
  /** 是否禁用 */
  disabled?: boolean
  /** 是否禁用涟漪效果 */
  disableRipple?: boolean
  /** 是否禁用触摸涟漪 */
  disableTouchRipple?: boolean
  /** 焦点涟漪 */
  focusRipple?: boolean
  /** 焦点可见时的类名 */
  focusVisibleClassName?: string
  /** tabIndex */
  tabIndex?: number
  /** 按钮类型 */
  type?: 'button' | 'submit' | 'reset'
  /** 链接地址 (如果提供则渲染为链接) */
  href?: string
  /** 是否居中涟漪 */
  centerRipple?: boolean
  /** sx 属性 */
  sx?: Record<string, any>
  /** 点击事件 */
  bindtap?: () => void
  onClick?: () => void
  /** 焦点事件 */
  onFocus?: () => void
  onBlur?: () => void
  /** 其他属性 */
  [key: string]: any
}

// =============================================
// ButtonBase 类名
// =============================================
export const buttonBaseClasses = {
  root: 'MuiButtonBase-root',
  disabled: 'Mui-disabled',
  focusVisible: 'Mui-focusVisible',
}

// =============================================
// ButtonBase 组件实现
// =============================================
export function ButtonBase(props: ButtonBaseProps) {
  const {
    children,
    className,
    style,
    disabled = false,
    disableRipple = false,
    disableTouchRipple = false,
    focusRipple = false,
    focusVisibleClassName,
    tabIndex = 0,
    type,
    href,
    centerRipple = false,
    sx,
    bindtap,
    onClick,
    onFocus,
    onBlur,
    ...other
  } = props

  // 处理点击事件
  const handleTap = () => {
    if (disabled) return
    if (bindtap) bindtap()
    if (onClick) onClick()
  }

  // 构建类名
  const classes = [
    buttonBaseClasses.root,
    disabled && buttonBaseClasses.disabled,
    className,
  ].filter(Boolean).join(' ')

  // 计算样式 - 对应 MUI ButtonBaseRoot 样式
  const computedStyle: Record<string, any> = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    boxSizing: 'border-box',
    backgroundColor: 'transparent',
    borderWidth: 0,
    margin: 0,
    borderRadius: 0,
    padding: 0,
    color: 'inherit',
    ...(disabled && {
      cursor: 'default',
      opacity: 0.5,
    }),
    ...sx,
    ...style,
  }

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

export default ButtonBase