'use client'

import PropTypes from 'prop-types'
import {useState} from 'react'
import {signOut} from 'next-auth/react'
import {useRouter} from 'next/navigation'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Fab from '@mui/material/Fab'
import {styled} from '@mui/material/styles'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import LogoutIcon from '@mui/icons-material/Logout'
import LoginIcon from '@mui/icons-material/Login'
import PersonAddIcon from '@mui/icons-material/PersonAdd'
import ConfirmationAlert from './confirmation-alert.js'

const LightTooltip = styled(({className, ...props}) => (
  <Tooltip {...props} classes={{popper: className}} />
))(({theme}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 15,
  },
}))

export default function Sign({session, navButton}) {
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const handleSignout = () => {
    setIsOpen(false)
    signOut()
  }

  return (
    <>
      <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 2}}>
        {session ? (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se déconnecter' placement='right'>
              <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
                <LogoutIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title={navButton.title} placement='right'>
              <Fab sx={{mr: 3}} size='large' color={navButton.color} onClick={() => router.push(navButton.path)}>
                {navButton.icon}
              </Fab>
            </LightTooltip>
          </Stack>
        ) : (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se connecter' placement='left'>
              <Fab size='large' color='success' onClick={() => router.push('/login')}>
                <LoginIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title='S’enregistrer' placement='right'>
              <Fab size='large' color='success' onClick={() => router.push('/register')}>
                <PersonAddIcon fontSize='large' />
              </Fab>
            </LightTooltip>
          </Stack>
        )}
      </Box>
      <ConfirmationAlert
        title='Se déconnecter'
        description='Vous êtes sur le point de vous déconnecter. Voulez-vous continuer ?'
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        handleConfirmation={handleSignout}
      />
    </>
  )
}

Sign.propTypes = {
  session: PropTypes.object,
  navButton: PropTypes.object.isRequired
}