import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import { styled } from '@mui/material/styles';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import MenuItem from '@mui/material/MenuItem';
import Drawer from '@mui/material/Drawer';
import MenuIcon from '@mui/icons-material/Menu';
import MenuList from '@mui/material/MenuList';
import { Link } from 'react-router-dom';

import { useState } from 'react';


const StyledToolbar = styled(Toolbar)(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexShrink: 0,
    borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
    border: '1px solid',
    borderColor: theme.palette.divider,
    padding: '8px 12px',
}));


const StyledMenuItem = styled(MenuItem)(({ }) => ({
    '&.Mui-selected': {
        backgroundColor: '#1976d2',
        color: "white",
    },
    '&.Mui-selected:hover': {
        backgroundColor: '#11579c',
        color: "white",
    },
    '&:hover': {
        backgroundColor: 'rgba(69, 146, 223, 0.45)',
    },

}));
interface ComponentProps {
    active: string;
}

function NavBar({ active }: ComponentProps) {
    const [open, setOpen] = useState(false);

    const toggleDrawer = (newOpen: boolean) => () => {
        setOpen(newOpen);
    };
    return (
        <AppBar
            position="static"
            sx={{
                boxShadow: 0,
                bgcolor: 'transparent',
                mt: '28px',
            }}
        >
            <Container maxWidth="xl">
                <StyledToolbar>
                    <Typography variant="h6" sx={{ color: '#5d8aa8' }}>
                        Самые высокие здания и сооружения
                    </Typography>
                    <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
                        <Link to="/">
                            <Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
                                Главная
                            </Button>
                        </Link>
                        <Link to="/list">
                            <Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
                                Список зданий
                            </Button>
                        </Link>
                        <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
                            Контакты
                        </Button>

                    </Box>
                    <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
                        <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
                            <MenuIcon />
                        </IconButton>
                        <Drawer
                            anchor="top"
                            open={open}
                            onClose={toggleDrawer(false)}
                        >
                            <Box>
                                <IconButton onClick={toggleDrawer(false)}>
                                    <CloseRoundedIcon />
                                </IconButton>
                            </Box>
                            <MenuList>
                                <Link to="/">
                                    <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
                                </Link>
                                <Link to="/list">
                                    <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
                                </Link>
                                <StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
                            </MenuList>
                        </Drawer>
                    </Box>
                </StyledToolbar>
            </Container>
        </AppBar>
    );
}
export default NavBar;