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 {jwennTeksEpiUserId, jwennUser} from '../lib/oki-api'
import NewPassword from '../components/password/new-password'

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 [teksEpiUserId, setTeksEpiUserId] = useState([])
  const [userId, setUserId] = useState(null)
  const [username, setUsername] = useState(null)
  const [open, setOpen] = useState(true)

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

    setOpen(false)
  }

  useEffect(() => {
    if (session && session.user) {
      const {_id} = session.user
      const jwennTeks = async userId => {
        const teks = await jwennTeksEpiUserId(userId)
        setTeksEpiUserId(teks)
      }

      jwennTeks(_id)
    }
  }, [session])

  useEffect(() => {
    if (localStorage.getItem('user-id')) {
      const userId = localStorage.getItem('user-id')
      setUserId(userId)
    }
  }, [])

  useEffect(() => {
    if (userId) {
      const getUsername = async id => {
        const user = await jwennUser(id)
        setUsername(user?.username)
      }

      getUsername(userId)
    }
  }, [userId])

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

  return (
    <HeadLayout title='Soumèt - Soumettre un texte' tab={3} 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' />
              <EkriTeks session={session} teks={teksEpiUserId} />
            </>
          )}
          {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
    }
  }
}