import React, {useState,useEffect} from 'react'
import {useStores} from '../src/store'
import './style.css'
import onreset from './utils/onreset'
import 'video-react/dist/video-react.css';
import theme from './theme'
import CircularProgress from '@material-ui/core/CircularProgress';
import {useObserver} from 'mobx-react-lite'
import styled from 'styled-components'
import PIN, {wasEnteredRecently, userPinCode} from './modals/pin'
import Onboard from './onboard'
import {instantiateRelay} from '../src/api'
import ChatList from './chatList/chatList'
import Chat from './chat/chat'
import * as localForage from 'localforage'
import Modals from './modals'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { PaletteType } from '@material-ui/core';
import 'react-h5-audio-player/lib/styles.css';
import EE, {RESET_IP, RESET_IP_FINISHED} from './utils/ee'
import setupDeepLink from './utils/deeplink'
import {check} from './version'

const palette = {
  type: 'dark' as PaletteType,
  primary: {
    main: theme.primary
  },
  secondary: {
    main: theme.secondary
  },
  action: {
    disabledBackground: theme.disabledPrimary,
  }
}

function Wrap(){
  const {ui} = useStores()
  return useObserver(()=>{
    if(ui.ready) return <ThemeProvider theme={ createMuiTheme({palette}) }><App /></ThemeProvider>
    return <Loading>
      <CircularProgress style={{color:'white'}} />
    </Loading>
  })
}

function App(){
  const {user,ui,chats} = useStores()
  const [pinned,setPinned] = useState(false)
  const [signedUp, setSignedUp] = useState(false)
  const [welcome, setWelcome] = useState(false)

  useEffect(()=>{
    setupDeepLink()
    onreset(function(){
      setSignedUp(false)
    })
  }, [])

  useEffect(()=>{
    (async () => {
      const isSignedUp = (user.currentIP && user.authToken)?true:false
      setSignedUp(isSignedUp)
      if(isSignedUp){
        instantiateRelay(user.currentIP, user.authToken, function(){
          ui.setConnected(true)
        }, function(){
          ui.setConnected(false)
        },
          ()=> resetIP()
        )
      }

      const pinWasEnteredRecently = await wasEnteredRecently()
      if(pinWasEnteredRecently) setPinned(true)
      setWelcome(true)

      // setTimeout(()=>{
      //   localForage.clear()
      //   console.log('localForage.clear()')
      // },1000)
    })()
  },[])

  async function resetIP(){
    EE.emit(RESET_IP)
    const newIP = await user.resetIP()
    instantiateRelay(newIP, user.authToken, function(){
      ui.setConnected(true)
    }, function(){
      ui.setConnected(false)
    })
    EE.emit(RESET_IP_FINISHED)
  }

  if(!signedUp) {
    return <Onboard welcome={welcome} onRestore={async()=>{
      await sleep(240)
      setSignedUp(true)
      const isPin = await userPinCode()
      if(isPin) setPinned(true)
    }}/>
  }
  if(!pinned) {
    return <main className="main" style={{background:theme.bg}}>
      {!pinned && <PIN onFinish={()=>setPinned(true)} />}
    </main>
  }
  return <Main />
}

function Main(){
  const {details,msg,ui,meme,auth} = useStores()

  useEffect(()=>{
    setTimeout(()=>{
      meme.authenticateAll()
      meme.checkCacheEnabled()
    }, 1500)
    msg.initLastSeen()
    checkVersion()
    details.getRelayVersion().then(v=>console.log("VERSION",v))
  },[])

  async function checkVersion(){
    const show = await check()
    console.log("SHOW VERSION DIALOG",show)
    if(show) ui.setShowVersionDialog(true)
  }

  return <main className="main" style={{background:theme.bg}}>
    <ChatList />
    <Chat />
    <Modals />
  </main>
}

const Loading=styled.div`
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, #A68CFF 0%, #6A8FFF) 0% 0% / cover; 
`

export default Wrap

async function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms))
}