import {useState, useEffect, forwardRef} from 'react'
import PropTypes from 'prop-types'
import {useSession} from 'next-auth/react'
import MuiAlert from '@mui/material/Alert'
import Snackbar from '@mui/material/Snackbar'
import Box from '@mui/material/Box'

import HeadLayout from '../components/head-layout'
import Koneksyon from '../components/sesyon/koneksyon'
import Dekoneksyon from '../components/sesyon/dekoneksyon'
import EkriTeks from '../components/soumet/ekri-teks'
import Footer from '../components/footer'

import {jwennUserEpiToken, jwennUserEpiUsername} from '../lib/oki-api'
import NewPassword from '../components/password/new-password'
import ChwaTeks from '../components/soumet/chwa-teks'

const Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

export default function Soumet({code}) {
  const {data: session} = useSession()
  const [localUsername, setLocalUsername] = useState(null)
  const [username, setUsername] = useState(null)
  const [open, setOpen] = useState(true)
  const [selectedTeks, setSelectedTeks] = useState(null)
  const [canAutoTranslate, setCanAutoTranslate] = useState(false)

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setOpen(false)
  }

  useEffect(() => {
    if (session?.jwt) {
      const getUser = async token => {
        const user = await jwennUserEpiToken(token)
        setCanAutoTranslate(user.canAutoTranslate)
      }

      getUser(session.jwt)
    }
  })

  useEffect(() => {
    if (localStorage.getItem('username')) {
      const username = localStorage.getItem('username')
      setLocalUsername(username)
    }
  }, [])

  useEffect(() => {
    if (localUsername) {
      const getUser = async username => {
        const user = await jwennUserEpiUsername(username)
        setUsername(user?.username)
      }

      getUser(localUsername)
    }
  }, [localUsername])

  useEffect(() => {
    if (username && localStorage.getItem('username')) {
      localStorage.removeItem('username')
    }
  }, [username])

  return (
    <HeadLayout title='Soumèt - Soumettre un texte' summary='Proposez la transcription d’un texte, accompagnée d’une ou plusieurs traductions.' tab={4} slug='soumet'>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
          {!session && !code && (
            <Koneksyon
              chimen='/soumet'
            />
          )}

          {!session && code && (
            <NewPassword code={code} />
          )}
          {session && session.user && (
            <>
              <Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
              <ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
              <EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
            </>
          )}
          {session && !session.user && (
            <Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
          )}
          {username && (
            <Snackbar
              open={open}
              autoHideDuration={10_000}
              onClose={handleClose}
            >
              <Alert severity='success' onClose={handleClose}><strong>Bonjour {username}, votre compte a été activé avec succès. Vous pouvez vous connecter.</strong></Alert>
            </Snackbar>
          )}
        </Box>
        <Footer />
      </Box>
    </HeadLayout>
  )
}

Soumet.defaultProps = {
  code: null
}

Soumet.propTypes = {
  code: PropTypes.string
}

export async function getServerSideProps({query}) {
  const {code} = query
  return {
    props: {
      code: code || null
    }
  }
}