'use client'

import {useState, useEffect, forwardRef} from 'react'
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 {useSearchParams} from 'next/navigation'
import Koneksyon from '../../components/sesyon/koneksyon'
import Dekoneksyon from '../../components/sesyon/dekoneksyon'
import EkriTeks from '../../components/soumet/ekri-teks'

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

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

export default function Pwopose() {
  const params = useSearchParams()
  const {code} = params
  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 (
    <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
      <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
        {!session && !code && (
          <Koneksyon
            chimen='/pwopose'
          />
        )}

        {!session && code && (
          <NewPassword code={code} />
        )}
        {session && session.user && (
          <>
            <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
            <ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
            <EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
          </>
        )}
        {session && !session.user && (
          <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
        )}
        {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>
  )
}