'use client'
import * as React from 'react';
import Image from 'next/image';
import Link from 'next/link';

import { Avatar, IconButton, Menu, MenuItem, Typography, Toolbar, Box, AppBar } from '@mui/material';
import LogoutDialog from './logoutdialog';
import { Login } from '@mui/icons-material';


function ResponsiveAppBar() {

    const [anchorEl, setAnchorEl] = React.useState(null);
    const [logoutOpen, setLogoutOpen] = React.useState(false);
    const [user, setUser] = React.useState({ isLoggedIn: false });

    React.useEffect(() => {
        const getUser = async () => {
            const res = await fetch('/api/auth/user', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' },
            });

            if (res.status === 200) {
                const user = await res.json();
                setUser({ isLoggedIn: true, username: user.user.USERNAME, email: user.user.EMAIL, rights: user.user.RIGHTS });
            } else {
                setUser({ isLoggedIn: false });
            }
        }

        getUser();
    }, []);

    const handleOpenUserMenu = (event) => {
        setAnchorEl(event.currentTarget);
    }

    const handleCloseUserMenu = () => {
        setAnchorEl(null);
    }

    const setLogoutOpenState = (open) => () => {
        setLogoutOpen(open);
    }

    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static" enableColorOnDark>
                <Toolbar>
                    <IconButton size='large' edge='start' color='inherit' aria-label='menu' href='/'>
                        <Image src='/assets/images/favicon.svg' alt="Logo" width={50} height={50} />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        InfoGare
                    </Typography>
                    {user.isLoggedIn ? <>
                        <IconButton color='inherit' onClick={handleOpenUserMenu}>
                            <Avatar alt={user.username}>{user.username.substring(0, 1)}</Avatar>
                        </IconButton>
                        <Menu sx={{ mt: '45px' }} id='user-menu' anchorEl={anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={Boolean(anchorEl)} keepMounted onClose={handleCloseUserMenu}>
                            <Typography variant='h6' sx={{ marginLeft: '15px', marginBottom: '5px' }}>{user.username}</Typography>
                            <Link href="/creator/account"><MenuItem onClick={handleCloseUserMenu}>InfoGare Creator</MenuItem></Link>
                            {user.rights.includes('admin') ? <Link href="/admin"><MenuItem onClick={handleCloseUserMenu}>Administration</MenuItem></Link> : null}
                            <MenuItem onClick={setLogoutOpenState(true)}>Se déconnecter</MenuItem>
                        </Menu>
                    </> : <>
                        <Link href="/login"><IconButton color='inherit'>
                            <Login />
                        </IconButton></Link>
                    </>}
                </Toolbar>
            </AppBar>
            <LogoutDialog open={logoutOpen} handleClose={() => { setLogoutOpen(false) }} />
        </Box>
    );
}
export default ResponsiveAppBar;