import {navigate, PageProps} from 'gatsby'
import React from 'react'
import {ThemeProvider} from '../chakra-providers'
import {SEO} from '../internal-plugins/pages'
import {useAppDispatch, useAppSelector, withRedux} from '../redux'
import {demoLogin, login} from '../redux/slices/auth'
import AdminLogin from './components/AdminLogin'

export const AdminLoginPage = withRedux((props: PageProps) => {
  const dispatch = useAppDispatch()

  const isAuthenticated = useAppSelector(state => state.auth.isAuthenticated)

  React.useEffect(() => {
    if (isAuthenticated) {
      navigate('/admin')
    }
  }, [isAuthenticated])

  const handleLogin = (email: string, password: string) => {
    dispatch(
      login({
        email,
        password
      })
    )
  }

  const handleLiveDemo = () => {
    dispatch(demoLogin({}))
  }

  const handleHomeClick = () => {
    navigate('/')
  }

  const handleDocsClick = () => {
    if (typeof window !== 'undefined') {
      window.open('https://github.com/snek-at/jaen', '_blank')?.focus()
    }
  }

  return (
    <ThemeProvider>
      <SEO
        pagePath={props.path}
        pageMeta={{
          title: 'Jaen Admin | Login'
        }}
      />
      <AdminLogin
        onLogin={handleLogin}
        onLiveDemo={handleLiveDemo}
        onHomeClick={handleHomeClick}
        onDocsClick={handleDocsClick}
      />
    </ThemeProvider>
  )
})

export default AdminLoginPage