import { DarkModeOutlined, LightMode, SettingsBrightness } from '@mui/icons-material';
import { Grid, Menu, MenuItem, Typography } from '@mui/material';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import useGuestBookStore from '../../../store/store';

interface Props {
  anchorEl: HTMLElement | null;
  handleClose: () => void;
}

const ThemeMenu: FC<Props> = ({ anchorEl, handleClose }) => {
  const [theme, setTheme] = useGuestBookStore((state) => [state.theme, state.setTheme]);
  const { t } = useTranslation();

  return (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
      }}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={Boolean(anchorEl)}
      onClose={handleClose}
      sx={{
        '& .MuiMenu-paper': {
          minWidth: '240px',
        },
      }}
    >
      <MenuItem
        key="dark"
        selected={theme === 'dark'}
        onClick={() => {
          setTheme('dark');
        }}
      >
        <Grid container spacing={2}>
          <Grid item xs={2}>
            <DarkModeOutlined />
          </Grid>
          <Grid item xs={10}>
            <Typography>{t('Dark')}</Typography>
          </Grid>
        </Grid>
      </MenuItem>
      <MenuItem
        key="light"
        selected={theme === 'light'}
        onClick={() => {
          setTheme('light');
        }}
      >
        <Grid container spacing={2}>
          <Grid item xs={2}>
            <LightMode />
          </Grid>
          <Grid item xs={10}>
            <Typography>{t('Light')}</Typography>
          </Grid>
        </Grid>
      </MenuItem>
      <MenuItem
        key="system"
        selected={!theme}
        onClick={() => {
          setTheme(undefined);
        }}
      >
        <Grid container spacing={2}>
          <Grid item xs={2}>
            <SettingsBrightness />
          </Grid>
          <Grid item xs={10}>
            <Typography>{t('System')}</Typography>
          </Grid>
        </Grid>
      </MenuItem>
    </Menu>
  );
};

export default ThemeMenu;
