import { useContext, useMemo } from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import Stack from '@mui/material/Stack';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';

import { ThemeContext } from '../ThemeContextProvider';

function NavBar({ mode }) {
  const theme = useTheme();
  const { switchColorMode } = useContext(ThemeContext);

  const pages = [
    { name: 'Schedule', to: '/schedule'},
    { name: 'RSVP', to: '/rsvp' },
    { name: 'Registry', to: '/registry' }
  ];

  return (
    <AppBar position="relative">
      <Toolbar>
        <Typography
          variant="h5"
          component={Link}
          to="/"
          color="inherit"
          sx={{ textDecoration: 'none' }}
          >
          Madison and Michael's Wedding
        </Typography>
        <Stack direction="row" sx={{ marginLeft: 'auto' }}>
          {pages.map((page) => (
            <Button color="inherit" component={Link} to={page.to} key={page.name}>
              {page.name}
            </Button>
          ))}
          <IconButton color="inherit" onClick={switchColorMode}>
            {theme.palette.mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
          </IconButton>
        </Stack>
      </Toolbar>
    </AppBar>
  );
}

export default NavBar;