import React, { useState } from 'react'
import classe from '../assets/Navbar.module.css'
import icon from '../assets/logo.ico'
import { FaTimes, FaRegWindowMinimize } from 'react-icons/fa'
import { useAuthContext } from '../contexts/AuthContext'
import { Modal, Box, Typography, Button } from '@mui/material'
import { useNavigate } from 'react-router-dom'

const Navbar = () => {
  const { token, setToken } = useAuthContext()
  const navigate = useNavigate()

  /**
   * function to quit app
   */
  const quitApp = () => {
    if (token !== null) {
      setOpen(true)
    } else {
      quit()
    }
  }

  /**
   * function to minimize the app
   * if the user try to open something
   * in the desktop
   */
  const minimize = async () => {
    await window.allUser.minimize()
  }

  /**
   * hook to open modal
   */
  const [open, setOpen] = useState(false)

  /**
   * function to close modal
   */
  const handleClose = () => setOpen(false)

  /**
   * function to quit
   */
  const quit = async () => {
    await window.allUser.quit()
  }

  /**
   * function after user click yes button in the modal
   */
  const logoutAndQuit = () => {
    localStorage.removeItem('ACCESS_TOKEN')
    setToken(null)
    navigate('/login')
    quit()
  }

  /**
   * function to return the view Modal
   *
   * @returns {JSX}
   */
  const modals = () => (
    <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
    >
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 450,
          bgcolor: 'background.paper',
          boxShadow: 24,
          p: 4
        }}
      >
        <Typography id="modal-title" variant="h6" component="h2">
          Notification
        </Typography>
        <Typography id="modal-description" sx={{ mt: 2 }}>
          Déconnecter et quitter ?
        </Typography>
        <Box
          sx={{
            marginTop: '2%',
            display: 'flex',
            gap: '20px',
            alignItems: 'end',
            justifyContent: 'flex-end'
          }}
        >
          <Button
            color="warning"
            variant="contained"
            onClick={logoutAndQuit}
            sx={{ width: '10px' }}
          >
            Oui
          </Button>
          <Button onClick={handleClose} color="error" variant="contained" sx={{ width: '10px' }}>
            Non
          </Button>
        </Box>
      </Box>
    </Modal>
  )

  return (
    <>
      <div className={classe.navnar}>
        {modals()}
        <div className={classe.gauche}>
          <img src={icon} alt="" width={20} height={20} className="rounded-circle" />
          <span style={{ fontWeight: 'bold', paddingLeft: '2%' }}>Université de Toamasina</span>
        </div>
        <div className={classe.droite}>
          <FaRegWindowMinimize
            style={{
              fontSize: '20px',
              cursor: 'pointer',
              paddingBottom: '11%',
              fontWeight: 'bold'
            }}
            onClick={minimize}
          />
          <FaTimes style={{ fontSize: '20px', cursor: 'pointer' }} onClick={quitApp} />
        </div>
      </div>
    </>
  )
}

export default Navbar
