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

type Direaction = 'left' | 'right' | 'bottom' | 'top'

interface PropsType {
  iconName: IconNames
  iconSize?: number
  svg?: boolean
  color?: string
  text?: string
  direction?: Direaction
  children?: React.ReactNode
  customClass?: string
  customStyle?: React.CSSProperties
  textClassName?: string
  textCustomStyle?: React.CSSProperties
}

const IconText: FC<PropsType> = (props) => {
  const { children, svg = false, iconName, iconSize = 40, text = '', color, textCustomStyle, direction = 'left' } = props
  const classNameObject = {
    [styles['iconText--horizontal']]: ['left', 'right'].includes(direction),
    [styles['iconText--vertical']]: ['bottom', 'top'].includes(direction),
  }
  const iconComponent = svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>

  const textComponent = children || <Text className={classnames(props.textClassName, styles.text)} style={textCustomStyle}>{text}</Text>

  const component = () => {
    if (direction === 'left' || direction === 'top') {
      return <>
        {iconComponent}
        {textComponent}
      </>
    }
    else if (direction === 'right' || direction === 'bottom') {
      return <>
        {textComponent}
        {iconComponent}
      </>
    }
  }

  return (
    <View className={classnames(styles.iconText, classNameObject, props.customStyle, props.customClass)}>
      {component()}
    </View>
  )
}
export default IconText
