import { Text, View } from '@tarojs/components'
import classNames from 'classnames'
import type { FC } from 'react'
import { useCallback, useMemo, useRef } from 'react'
import type { IconNames } from '../iconfont/iconfont'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'

interface CellPropsType {
  title: string | React.ReactNode
  desc: string
  isLink?: boolean
  onClick?: () => void
  customStyle?: React.CSSProperties
  customClassName?: string
  customDescClassName?: string
  iconName?: IconNames
}
const Cell: FC<CellPropsType> = (props) => {
  const { title, desc, isLink = false, customClassName, customStyle, onClick, iconName, customDescClassName } = props

  const onClickRef = useRef(onClick)
  onClickRef.current = onClick
  // 防止函数的引用改变
  const handleClick = useCallback(() => {
    return isLink && onClickRef.current?.()
  }, [isLink])

  const CellElement = useMemo(() => {
    return (
      <View className={classNames(styles.cell, customClassName)} style={customStyle} onClick={handleClick}>
        <View className={styles.title}>
          {iconName && <IconFont name={iconName} size={46}></IconFont>}
          <View>{title}</View>
        </View>
        <View className={styles.desc}>
          <Text className={classNames(styles.descText, customDescClassName)}>{desc}</Text>
          {isLink && <IconFont name="icon-chakanquanbukehu" size={46} color="inherit"></IconFont>}
        </View>
      </View>
    )
  }, [title, desc, handleClick, customStyle])

  return <>{CellElement}</>
}
export default Cell
