import React, { useState, useEffect } from 'react'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import { useSelector } from 'react-redux'
import { View } from '@tarojs/components'
import Overlay from '@/components/Overlay'
import Loading from '@/components/Loading'
import AuthAvatar from '@/components/Auth/AuthAvatar'
import AuthPhone from '@/components/Auth/AuthPhone'
import Spin from '@/components/Spin/Spin2'
import FixedConsultant from '@/components/FixedConsultant'
import { report as reportCustomer } from '@/utils/customer'
import { ROLE_CODE } from '@/constants/user'
import useAuth from './useAuth'
import { routes } from '../routes'

import './style.scss'

export default (ChildComponent) => (props) => {
  const consultant = useSelector(s => s.system.consultant)
  const { spinning, userInfo } = useSelector(s => s.user)
  const { person, ...extInfo } = userInfo || {}
  const router = useRouter()
  const page = routes.filter((r) => (router.path.indexOf(r.page) > -1))[0]
  const [loading, setLoading] = useState(false)
  const [authPhone, authAvatar] = useAuth(person, page)

  const { id } = router.params
  const showConsultant = page.shortcut && page.shortcut.consultant

  // 页面分享
  const [shareContent, setShareContent] = useState({})
  // 页面埋点
  const [trackData, setTrackData] = useState({})

  // 报备客户
  useEffect(() => {
    reportCustomer(person, consultant, false).catch(() => {})
  }, [person, consultant])

  // 请求埋点设置
  useEffect(() => {
    if (id) {
      setShareContent({})
    }
  } ,[id, page.type])

  // 埋点数据
  useEffect(() => {
    const consultantId = person?.personType === ROLE_CODE.CONSULTANT ? person.personId : undefined

    setTrackData({
      eventType: page.type,
      propertyName: page.name,
      consultantId,
      sharePersonId: person?.personId,
      targetId: id,
    })
  }, [person, page, id])

  // 主要用于埋点
  useEffect(() => {
    Taro.setStorage({ key: 'page', data: page })
  }, [page])

  useEffect(() => {
    setLoading(!person || !person.personId)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [person])

  return (
    <>
      <Overlay visible={loading} style={{background: '#fff'}}>
        <Loading />
      </Overlay>
      <Overlay visible={authPhone} aligin='bottom'>
        <View className='auth-wrapper'>
          <AuthPhone consultant={consultant} router={router} page={page} />
        </View>
      </Overlay>
      <Overlay visible={!authPhone && authAvatar} aligin='bottom'>
        <View className='auth-wrapper'>
          <AuthAvatar />
        </View>
      </Overlay>
      <Spin size={32} spinning={spinning} />
      {
        person && !!person.personId && (
          <ChildComponent
            person={person}
            router={router}
            consultant={consultant}
            page={page}
            shareContent={shareContent}
            trackData={trackData}
            {...props}
            {...extInfo}
          />
        )
      }
      {
        !!showConsultant && (<FixedConsultant consultant={consultant} />)
      }
    </>
  )
}