import React from 'react'
import { View, Text } from '@tarojs/components'
import TDesignIcon from '../icon'
import './index.css'

interface CellProps {
  title?: string
  description?: string
  note?: string
  image?: string
  leftIcon?: string
  rightIcon?: string
  required?: boolean
  bordered?: boolean
  hover?: boolean
  arrow?: boolean | string
  align?: 'top' | 'middle' | 'bottom'
  onClick?: (event: any) => void
  className?: string
  children?: React.ReactNode
  noteSlot?: React.ReactNode
}

export default function TDesignCell({
  title,
  description,
  note,
  image,
  leftIcon,
  rightIcon,
  required = false,
  bordered = true,
  hover = false,
  arrow = false,
  align = 'middle',
  onClick,
  className = '',
  children,
  noteSlot
}: CellProps) {
  const handleClick = (event: any) => {
    onClick?.(event)
  }

  const getArrowIcon = () => {
    if (arrow === true) return 'arrow-right'
    if (typeof arrow === 'string') return arrow
    return null
  }

  const arrowIcon = getArrowIcon()

  return (
    <View
      className={`
        tdesign-cell
        tdesign-cell--align-${align}
        ${bordered ? 'tdesign-cell--bordered' : ''}
        ${hover ? 'tdesign-cell--hover' : ''}
        ${className}
      `}
      hoverClass={hover ? 'tdesign-cell--hover-active' : ''}
      hoverStayTime={70}
      onClick={handleClick}
    >
      {/* 左侧区域 */}
      <View className="tdesign-cell__left">
        {leftIcon && (
          <TDesignIcon
            name={leftIcon}
            size="var(--td-cell-left-icon-font-size, 48rpx)"
            color="var(--td-cell-left-icon-color, #0052d9)"
            className="tdesign-cell__left-icon"
          />
        )}

        {image && (
          <View className="tdesign-cell__left-image">
            {/* 这里可以使用 Taro 的 Image 组件 */}
            <Text>Image: {image}</Text>
          </View>
        )}
      </View>

      {/* 中间区域 */}
      <View className="tdesign-cell__title">
        {title && (
          <View className="tdesign-cell__title-text">
            {title}
            {required && <Text className="tdesign-cell--required">&nbsp;*</Text>}
          </View>
        )}

        {description && (
          <View className="tdesign-cell__description">
            <Text className="tdesign-cell__description-text">
              {description}
            </Text>
          </View>
        )}
      </View>

      {/* 右侧区域 */}
      <View className={`tdesign-cell__note ${note || noteSlot ? '' : 'tdesign-cell__note--empty'}`}>
        {noteSlot ? (
          noteSlot
        ) : note ? (
          <Text className="tdesign-cell__note-text">
            {note}
          </Text>
        ) : null}
      </View>

      <View className={`tdesign-cell__right tdesign-cell__right--${align}`}>
        {rightIcon && (
          <TDesignIcon
            name={rightIcon}
            size="var(--td-cell-right-icon-font-size, 48rpx)"
            color="var(--td-cell-right-icon-color, rgba(0,0,0,.4))"
            className="tdesign-cell__right-icon"
          />
        )}

        {arrowIcon && (
          <TDesignIcon
            name={arrowIcon}
            size="var(--td-cell-right-icon-font-size, 48rpx)"
            color="var(--td-cell-right-icon-color, rgba(0,0,0,.4))"
            className="tdesign-cell__right-icon"
          />
        )}

        {children}
      </View>
    </View>
  )
}