import { View, Text } from '@tarojs/components'
import { 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'

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

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

const LoadMore: FC<LoadMorePropsType> = props => {
  const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', 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 onClick={handleShowMore}>
        <Text style={{ marginRight: '5px' }}>{moreText}</Text>
        <Iconfont name='icon-zhankai' size={32}></Iconfont>
      </View>
    )
  } else {
    component = <Text>{noMoreText}</Text>
  }
  return <View className={styles.loadMore}>{component}</View>
}
export default LoadMore
