import { Text, View } from '@tarojs/components'
import type { FC } from 'react'
import Iconfont from '../iconfont/iconfont'
import LoadingCard from '../loadingCard/index'
import styles from './index.module.scss'

export type LoadMoreStatus = 'more' | 'loading' | 'noMore' | 'empty'

interface LoadMoreEvent {
  onClick?: () => void
}

interface LoadMorePropsType extends LoadMoreEvent {
  status: LoadMoreStatus
  moreText?: string
  loadingText?: string
  noMoreText?: string
  emptyText?: string
}

const LoadMore: FC<LoadMorePropsType> = (props) => {
  const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', emptyText = '暂无数据', onClick } = props

  const handleShowMore = () => {
    onClick && onClick()
  }

  let component: JSX.Element | null = null
  if (status === 'loading') {
    component = <LoadingCard title={loadingText}></LoadingCard>
  }
  else if (status === 'more') {
    component = (
      <View className="flex-row" onClick={handleShowMore}>
        <Text style={{ marginRight: '5px' }}>{moreText}</Text>
        <Iconfont name="icon-zhankai" size={32}></Iconfont>
      </View>
    )
  }
  else if (status === 'empty') {
    component = (
      <View className={styles.empty}>
        <Text>{emptyText}</Text>
      </View>
    )
  }
  else {
    component = <Text>{noMoreText}</Text>
  }
  return <View className={styles.loadMore}>{component}</View>
}
export default LoadMore