import {FC, ReactNode, useCallback, useEffect, useState} from "react";
import {Image, Video, View} from "@tarojs/components";
import {brandApi, BrandRecord} from "@/api";
import Taro, {useReachBottom} from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Spinner from "@/components/spinner";
import Img from "@/components/image/image";
import {beforeTime} from "@/utils/time";
import styles from './list.module.scss'
import articleLine from "@/static/img/articleLine.png"
import Collect from "@/components/collect/collect";

const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onClick}) => {
  let media: ReactNode
  if (data.introductory_video_resource) {
    media = <Video
      style={{width: '100%'}}
      src={data.introductory_video_resource.url}
    />
  } else if (data.brand_album) {
    media = <Img
      // width={712}
      height={320}
      src={data.brand_album.split(",")[0]}
      mode="aspectFill"
      style={{background: '#ededed'}}
      onClick={onClick}
    />
  }

  return (
    <View className="bg-white flex flex-column justify-stretch mb-2_4 rounded-10 clip">
      <View className="p-3" onClick={onClick}>
        <View className='mb-2 font-32 flex'>
          <Img
            width={76}
            height={76}
            src={data.logo}
            mode='aspectFill'
            errorType='avatar'
            className="rounded-10 clip"
            style={{background: '#ededed'}}
          />
          <View className="ml-2 flex-1">
            <View className="text-row1 font-28">{data.name}</View>
            <View className='font-24 mt-2 text-muted'>{beforeTime(data.created_at)}·加入</View>
          </View>
        </View>

        <View className={styles.previewImag}>
          {media}
        </View>

        <View className="font-24 text-muted mb-4 text-row3 mt-2" style={{lineHeight: 1.4}}>
          {data.graphic_introduction}
        </View>

        <View className="flex gap20rpx font-24 text-muted justify-around">
          <View className={styles.feature}>
            <Image src={articleLine}/>
            {data.article_count || 0}
          </View>
          <Collect/>
        </View>
      </View>
    </View>
  )
}

const BrandList: FC = () => {
  const [page, setPage] = useState(1)
  const [brands, setBrands] = useState<BrandRecord[]>([])
  const [total, setTotal] = useState(0)
  const [text, setText] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getData()
  }, [page])

  const getData = useCallback(async () => {
    try {
      const res = await brandApi.list(page, 10)
      if (page === 1) {
        if (res.list.length < 10) {
          setText('暂无更多')
        } else {
          setText('上拉加载更多')
        }
      }
      setTotal(res.total)
      setBrands([
        ...brands,
        ...res.list
      ])
    } catch (e) {
    }
    setLoading(false)
  }, [page])


  function jumpInfo(id: number) {
    Taro.navigateTo({url: `/pages/preview/brand/info/info?id=${id}`})
  }

  useReachBottom(useCallback(() => {
    if (brands?.length < total) {
      setPage(page + 1)
    } else {
      setText('没有更多了~')
    }
  }, [total, brands]))

  let content: ReactNode
  if (brands.length) {
    content = (
      <>
        {brands.map(d => <BrandItem data={d} key={d.id} onClick={() => jumpInfo(d.id)}/>)}
        <View className='text-center font-24 text-dark mt-3'>{text}</View>
      </>
    )
  } else {
    content = <Empty name='暂无品牌入驻'/>
  }

  return (
    <View className='p-2'>
      <Spinner enable={loading} overlay/>
      {content}
    </View>
  )
}

export default BrandList
