import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import history from '@/utils/history'
import { renClickPageFu } from '@/pages/B1more/data'
import { locSetTimeFu, locTimeFlagFu } from '@/utils/storage'
import { useSelector } from 'react-redux'
import store, { RootState } from '@/store'
import classNames from 'classnames'
import { API_setLike } from '@/store/action/all'
import { Toast } from 'antd-mobile'

type Props = {
  unityId?: '1' | '2'
  gameFu?: () => void
  plowFu?: () => void
  unityEnd?: () => void
  // 左上角的3个按钮是否显示,为true表示显示，默认为true
  leftBtnShow?: boolean
  isGuide?: string //操作指引
}

function FloorBtn({ unityId, gameFu, plowFu, unityEnd, isGuide, leftBtnShow = true }: Props) {
  // 获取点赞数量
  const { likeNum } = useSelector((state: RootState) => state.A0Layout)

  // 进页面看下是否已经点赞过了
  const [likeSta, setLikeSta] = useState(false)
  useEffect(() => {
    const likeFlag = locTimeFlagFu()
    if (likeFlag) setLikeSta(true)
  }, [])

  // 点赞的+1动画
  const [likeMove, setLikeMove] = useState(false)

  // 点击点赞
  const likeFu = useCallback(async () => {
    if (!likeSta) {
      // 今天已经赞过了
      Toast.show({
        content: '您今天已经赞过了!'
      })
      return
    }

    // 发送请求
    const res = await API_setLike('star')
    if (res.code === 0) {
      // 存当天0点时间戳
      locSetTimeFu()

      // +1动画显示
      setLikeMove(true)
      if (likeMove) return

      // 点赞图标变高亮
      setLikeSta(false)
      setTimeout(() => {
        // +1动画隐藏
        setLikeMove(false)
        // num++
        store.dispatch({ type: 'layout/likeNum', payload: res.data.pcsStar })
      }, 1400)
    }
  }, [likeMove, likeSta])

  // 点击留言板/分享
  const openAPPpageComFu = useCallback((val: 'layout/shareShow' | 'layout/msgShow') => {
    store.dispatch({ type: val, payload: true })
  }, [])

  return (
    <div className={styles.FloorBtn} id='FloorBtn'>
      {/* 操作指引 */}
      {isGuide ? (
        <div
          title='操作指引'
          className='FloorBtn5'
          onClick={() => store.dispatch({ type: 'layout/guideVideo', payload: isGuide })}
        ></div>
      ) : null}

      {gameFu ? <div title='游戏' className='FloorBtn0' onClick={gameFu}></div> : null}
      {plowFu ? <div title='汉代庄园田耕记' className='FloorBtn3' onClick={plowFu}></div> : null}

      <div
        className='FloorBtn1'
        hidden={!unityId}
        title='漫游模式'
        onClick={() => history.push(`/unity/${unityId}`)}
      ></div>

      {/* 陶庄园 */}
      {unityEnd ? <div title='陶庄园' className='FloorBtn4' onClick={unityEnd}></div> : null}

      {/* 更多 跳新页面 */}
      <div
        title='更多'
        className='FloorBtn2'
        onClick={() => {
          const txt = renClickPageFu()
          if (txt) {
            txt === '1' ? history.replace('/more?r=ren1') : history.replace('/more?r=ren0')
          } else history.push('/more')
        }}
      ></div>

      {/* 新加的左上角3个按钮 */}
      <div className='leftBtn' hidden={!leftBtnShow}>
        <div
          title='分享'
          className='shareImg'
          onClick={() => openAPPpageComFu('layout/shareShow')}
        ></div>
        <div
          title='留言板'
          className='msgImg'
          onClick={() => openAPPpageComFu('layout/msgShow')}
        ></div>
        <div
          onClick={likeFu}
          title='点赞'
          className={classNames('likeImg', likeSta ? '' : 'likeImgAc')}
        >
          <span className='likeImg1'>{likeNum}</span>
          {likeMove ? <span className='likeImg2'>+1</span> : null}
        </div>
      </div>
    </div>
  )
}

const MemoFloorBtn = React.memo(FloorBtn)

export default MemoFloorBtn
