import { HeaderToggleButton } from './Header';
import { ThemeMode, useThemeConfig } from '@/components/Layout/ThemeProvider';
import { usePopoverState } from '@/hooks';
import { MoonOutlined, SunOutlined } from '@ant-design/icons';
import { ClickAwayListener, List, ListItemButton, Paper, Popper, Typography, useTheme } from '@mui/material';
import { Transitions } from '@/components/@extended';
import { MainCard } from '@/components/MainCard';
import { Brightness6 } from '@mui/icons-material';
import { useCallback } from 'react';
import { useTranslate } from 'ra-core';

type ThemeModePopoverProps = {
  open: boolean;
  anchorEl: HTMLElement | null;
  handleClose: () => void;
  theme: any;
  mode: ThemeMode;
  toggleThemeMode: (theme: ThemeMode) => void;
};

function ThemeModePopover({ open, anchorEl, handleClose, theme, mode, toggleThemeMode }: ThemeModePopoverProps) {
  const translate = useTranslate();
  return (
    <Popper placement="bottom-end" open={open} anchorEl={anchorEl} role={undefined} transition disablePortal>
      {({ TransitionProps }) => (
        <Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
          <Paper
            sx={{
              boxShadow: theme.customShadows.z1,
              minWidth: 200,
              [theme.breakpoints.down('md')]: { maxWidth: 250 },
              marginTop: 1
            }}
          >
            <ClickAwayListener onClickAway={handleClose}>
              <MainCard elevation={0} border={false} content={false}>
                <List>
                  <ListItemButton selected={mode === 'light'} onClick={() => toggleThemeMode('light')}>
                    <SunOutlined />
                    <Typography variant="subtitle1" ml={1}>
                      {translate('ra.preferences.theme.light')}
                    </Typography>
                  </ListItemButton>

                  <ListItemButton selected={mode === 'dark'} onClick={() => toggleThemeMode('dark')}>
                    <MoonOutlined />
                    <Typography variant="subtitle1" ml={1}>
                      {translate('ra.preferences.theme.dark')}
                    </Typography>
                  </ListItemButton>

                  <ListItemButton selected={mode === 'auto'} onClick={() => toggleThemeMode('auto')}>
                    <Brightness6 />
                    <Typography variant="subtitle1" ml={1} textTransform={'none'}>
                      {translate('ra.preferences.theme.auto')}
                    </Typography>
                  </ListItemButton>
                </List>
              </MainCard>
            </ClickAwayListener>
          </Paper>
        </Transitions>
      )}
    </Popper>
  );
}

function ThemeToggler(): JSX.Element {
  const theme = useTheme();
  const { mode, setMode } = useThemeConfig();
  const { open, anchorEl, handleToggle, handleClose } = usePopoverState();

  const toggleThemeMode = useCallback(
    (theme: ThemeMode) => {
      setMode(theme);
    },
    [setMode]
  );

  const ThemeIcon = useCallback(() => {
    switch (mode) {
      case 'light':
        return <SunOutlined />;
      case 'dark':
        return <MoonOutlined />;
      default:
        return <Brightness6 />;
    }
  }, [mode]);

  return (
    <HeaderToggleButton value="theme-mode" aria-label="toggle mode" onClick={handleToggle} selected={false}>
      <ThemeIcon />
      {open ? (
        <ThemeModePopover
          open={open}
          anchorEl={anchorEl}
          handleClose={handleClose}
          theme={theme}
          mode={mode}
          toggleThemeMode={toggleThemeMode}
        />
      ) : null}
    </HeaderToggleButton>
  );
}

export { ThemeToggler };