import React, { useEffect, useState, useMemo } from 'react'
import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
import { useDispatch } from 'react-redux'
import { uccnDetail, indexInfo, getProjectDoc } from 'services/user'
import { useWeb3React } from '@web3-react/core'
import { languageList } from 'config/localization/languages'
import { useTranslation } from 'contexts/Localization'
import useTheme from 'hooks/useTheme'
import useAuth from 'hooks/useAuth'
import { usePriceHccUsdt, useProfile } from 'state/hooks'
import { useUnactiveAccount, useSignLogin, useAccount, useUserInfo } from 'state/userInfo/hooks'
import useWeb3Provider from 'hooks/useActiveWeb3React'
import { clearUserInfo } from 'state/actions'
import config from './config'

const Menu = (props) => {
  const account = useAccount()
  const { login, logout } = useAuth()
  const [hasWalletLogin, setHasWalletLogin] = useState(false)
  const [documentAddress, setDocumentAddress] = useState('')
  const { isDark, toggleTheme } = useTheme()
  const hccPriceUsdt = usePriceHccUsdt()
  const { library } = useWeb3Provider()
  const unActiveAccount = useUnactiveAccount()
  const dispatch = useDispatch()
  const { profile } = useProfile()
  const userInfo = useUserInfo()
  const { currentLanguage, setLanguage, t } = useTranslation()
  const inviteUrl = useMemo(() => {
    return userInfo?.inviteCode ? `${window.location.origin}?inviteCode=${userInfo.inviteCode}` : window.location.origin
  }, [userInfo])
  const sign = useSignLogin()
  const handleLogin = async (connectorID: ConnectorNames) => {
    await login(connectorID)
    setHasWalletLogin(true)
  }
  const handleLogout = () => {
    dispatch(clearUserInfo())
    logout()
  }

  const [socialLink, setSocialLink] = useState([])
  const getDetails = async () => {
    const result = await indexInfo()
    const { data } = result.data
    const list = data.externalLinkList.map((item, index) => {
      const links = Object.keys(item.linkMap).map((key) => {
        return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
      })
      return { icon: item.iconResource.url, list: links, key: index + item.name, name: item.name }
    })
    setSocialLink(list)
  }
  const getDoc = async () => {
    const result = await getProjectDoc()
    console.log(result)
    const { data } = result.data
    setDocumentAddress(data)
    console.log(data)
  }
  // 钱包登录后
  useEffect(() => {
    if (unActiveAccount && library.provider && hasWalletLogin) {
      setHasWalletLogin(false)
      sign()
    }
  }, [unActiveAccount, hasWalletLogin, library])
  useEffect(() => {
    getDetails()
    getDoc()
  }, [])
  return (
    <UikitMenu
      account={account}
      login={handleLogin}
      inviteUrl={inviteUrl}
      logout={handleLogout}
      isDark={isDark}
      toggleTheme={toggleTheme}
      currentLang={currentLanguage.code}
      langs={languageList}
      setLang={setLanguage}
      cakePriceUsd={hccPriceUsdt}
      links={config(t)}
      socialLink={socialLink}
      documentAddress={documentAddress}
      {...props}
    />
  )
}

export default Menu