import qs from 'query-string'
import { FC, useCallback, useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import styled from 'styled-components'

import { login as loginApi } from '../api'
import { colors } from '../style-vars'

const LoginPageWrapper = styled.div`
  height: 100vh;
  width: 100%;
  background-color: ${colors.bgMain};
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 640px;
  box-sizing: border-box;
`

enum loginStatus {
  UNKNOWN = 'unknown',
  LOGINED = 'logined',
  LOGINING = 'logining',
  LOGINFAIL = 'loginfail',
}

export const LoginPage: FC = () => {
  const [ls, setLS] = useState<loginStatus>(loginStatus.UNKNOWN)

  const login = useCallback(async () => {
    const { code, state } = qs.parse(window.location.search)
    if (code) {
      const codeStr = Array.isArray(code) ? code[0] : code
      const stateStr = Array.isArray(state) ? state[0] : state
      const res = await loginApi(codeStr || '', stateStr || '')
      if (res) {
        setLS(loginStatus.LOGINED)
      } else {
        setLS(loginStatus.LOGINFAIL)
      }
    }
  }, [])

  useEffect(() => {
    const token = localStorage.getItem('bizToken')
    if (token) {
      setLS(loginStatus.LOGINED)
    } else {
      setLS(loginStatus.LOGINING)
      login()
    }
  }, []) // eslint-disable-line

  return ls === loginStatus.UNKNOWN ? null : ls === loginStatus.LOGINED ? (
    <Redirect exact to={{ pathname: '/' }} />
  ) : (
    <LoginPageWrapper>{ls === loginStatus.LOGINFAIL ? 'Login Fail' : 'Waiting'}</LoginPageWrapper>
  )
}