import { AppBar, Toolbar, Typography, Button, Menu, MenuItem } from '@mui/material'
import { Link, useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useState } from 'react'

export default function Layout({ children }: { children: React.ReactNode }) {
    const location = useLocation()
    const { isLoggedIn, logout } = useAuth()
    const navigate = useNavigate()

    const [anchorElCharacter, setAnchorElCharacter] = useState<null | HTMLElement>(null)
    const [anchorElHomework, setAnchorElHomework] = useState<null | HTMLElement>(null)

    const handleLogout = () => {
        logout()
        navigate('/login')
    }

    const handleMenuOpen = (
        setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
    ) => (event: React.MouseEvent<HTMLElement>) => {
        setter(event.currentTarget)
    }

    const handleMenuClose = (
        setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
    ) => () => {
        setter(null)
    }

    const menuItems = isLoggedIn ? (
        <>
            <Button component={Link} to="/dashboard" color="inherit">대시보드</Button>

            <Button
                color="inherit"
                onClick={handleMenuOpen(setAnchorElCharacter)}
            >
                캐릭터
            </Button>
            <Menu
                anchorEl={anchorElCharacter}
                open={Boolean(anchorElCharacter)}
                onClose={handleMenuClose(setAnchorElCharacter)}
            >
                <MenuItem component={Link} to="/characters" onClick={handleMenuClose(setAnchorElCharacter)}>캐릭터 목록</MenuItem>
                <MenuItem component={Link} to="/characters/me/homeworks" onClick={handleMenuClose(setAnchorElCharacter)}>내 숙제</MenuItem>
            </Menu>

            <Button
                color="inherit"
                onClick={handleMenuOpen(setAnchorElHomework)}
            >
                숙제
            </Button>
            <Menu
                anchorEl={anchorElHomework}
                open={Boolean(anchorElHomework)}
                onClose={handleMenuClose(setAnchorElHomework)}
            >
                <MenuItem component={Link} to="/homeworks" onClick={handleMenuClose(setAnchorElHomework)}>숙제 목록</MenuItem>
            </Menu>

            <Button color="inherit" onClick={handleLogout}>로그아웃</Button>
        </>
    ) : (
        <Button component={Link} to="/login" color="inherit">로그인</Button>
    )

    return (
        <>
            <AppBar position="static" key={location.pathname}>
                <Toolbar>
                    <Typography variant="h6" sx={{ flexGrow: 1 }}>
                        <Button component={Link} to="/" color="inherit">
                            숙제노기
                        </Button>
                    </Typography>
                    {menuItems}
                </Toolbar>
            </AppBar>

            {children}
        </>
    )
}
