import {FC, useCallback, useEffect, useMemo, useState} from "react";
import {Image, Text, View} from "@tarojs/components";
import Taro, {useRouter} from "@tarojs/taro";
import {ArticleRecord, brandApi} from "@/api";
import styles from "./article.module.scss";
import down from "@/static/img/doubleDown.png";
import {Profile} from "@/store";
import {parse} from "@/utils/marked/marked";
import Empty from "@/components/empty/empty";
import Spin from "@/components/spinner";
import {beforeTime} from "@/utils/time";
import Img from "@/components/image/image";


const article: FC = () => {
  const {token} = Profile.useContainer()
  const [enable, setEnable] = useState(true)
  const {id} = useRouter().params as unknown as { id: number }
  const [articleInfo, setArticleInfo] = useState<ArticleRecord>()
  const [ultra, setUltra] = useState(true)
  const globalData = Taro.getApp().globalData
  const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight
  const {children} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])

  useEffect(() => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery()
      query.select('#childrenNode').boundingClientRect((res) => {
        if (!Array.isArray(res)) {
          console.log({childrenNode: res})
          setUltra(pageHeight * .45 <= res.height)
        }
      }).exec()
    }, 300)
  }, [children])

  Taro.useReady(() => {
    getData().then()
  })

  const getData = useCallback(async () => {
    try {
      const data = await brandApi.articleInfo(id)
      Taro.setNavigationBarTitle({title: data.title})
      if (data.content.length < 200) {
        setUltra(false)
      }
      setArticleInfo(data)
    } catch (e) {
    }
    setEnable(false)
  }, [id])

  function helloWorld() {
    return (
      <>
        <Spin overlay enable={enable}/>
        <View style={{
          padding: '10px',
          height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto',
          overflow: !token ? 'hidden' : 'auto'
        }}>
          <View id="childrenNode">
            <View className={styles.articleTitle}>{articleInfo?.title}</View>
            {
              children.length > 0 ?
                <View>
                  {
                    articleInfo?.brands.map(d => <View className={styles.article}>
                      <Img src={d.logo} width={80} height={80} className={styles.articleImag}/>
                      <View className='ml-2'>
                        <View>{d?.name}</View>
                        <View className='flex mt-1 text-muted font-24'>
                          <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
                          <View>阅读 {articleInfo.page_view || 1}</View>
                        </View>
                      </View>
                    </View>)
                  }
                  {children}
                </View>
                : <Empty name='暂无数据'/>
            }
          </View>
        </View>
        {
          !token && ultra && children.length > 0 &&
          <View className={styles.fixedBox}>
            <View className={styles['fixedBox-inner']}>
              <View className={styles['fixedBox-inner-icon']}>
                <Image src={down}/>
              </View>
              <View className={styles['fixedBox-inner-box']}
                    onClick={() => Taro.navigateTo({url: '/pages/login/login'})}>
                <Text>登录查看更多内容</Text>
              </View>
            </View>
          </View>
        }
      </>
    )

  }

  return helloWorld()
}
export default article