import { useState } from 'react'
import {
  Box,
  Typography,
  styled,
  ToggleButtonGroup,
  ToggleButton,
  ListItem,
  List,
  ListItemText,
  ListItemButton,
} from '@mui/material'
import MuiDrawer from '@/components/yaui/Drawer'
import { LightMode, DarkMode } from '@mui/icons-material'
import {
  useChangeMode,
  useSelectedMode,
  usePresetPalette,
  useSelectedPalette,
  useChangePalette,
} from '@/components/context/YaThemeProdiver'
import {
  useTranslate,
  useSelectedLanguage,
  useLanguages,
  useChangeLang,
} from '@/components/context/YaLocalesProvider'
import ColorBar from './ColorBar'
import type { SettingDrawerProps } from '../layout'
import type { AppThemeMode } from '@/configs/config'

const Heading = styled(Typography)(({ theme }) => ({
  margin: '20px 0 10px',
  color: theme.palette.grey[600],
  fontWeight: 700,
  fontSize: theme.typography.pxToRem(11),
  textTransform: 'uppercase',
  letterSpacing: '.08rem',
}))

const IconToggleButton = styled(ToggleButton)({
  display: 'flex',
  justifyContent: 'center',
  width: '100%',
  '& > *': {
    marginRight: '8px',
  },
})

const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
  const { opened, onClose } = props
  // locales
  const t = useTranslate()
  const selectedlang = useSelectedLanguage()
  const languages = useLanguages()
  const changeLang = useChangeLang()
  // mode
  const changeColorMode = useChangeMode()
  const selectedMode = useSelectedMode()
  // palette
  const presetPalette = usePresetPalette()
  const selectedPalette = useSelectedPalette()
  const changePalette = useChangePalette()
  const [mode, setMode] = useState<keyof typeof AppThemeMode>(selectedMode as any)
  const [lang, setLang] = useState<string>(selectedlang)
  const [palatte, setPalatte] = useState<string>(selectedPalette)
  const handleChangeThemeMode = (e: React.MouseEvent<HTMLElement>, themeMode: string | null) => {
    if (themeMode) {
      setMode(themeMode as any)
      changeColorMode()
    }
  }
  const handleChangeLang = (l: string) => {
    setLang(l)
    changeLang(l)
  }
  const handleChangeColor = (p: string) => {
    setPalatte(p)
    changePalette(JSON.parse(p))
  }
  return (
    <MuiDrawer open={opened} onClose={onClose} title={t('setting')}>
      <Box sx={{ padding: '0 16px' }}>
        <Heading gutterBottom id="settings-mode">
          {t('mode')}
        </Heading>
        <ToggleButtonGroup
          aria-labelledby="settings-mode"
          value={mode}
          onChange={handleChangeThemeMode}
          exclusive
          fullWidth
        >
          <IconToggleButton value="light" aria-label="light mode">
            <LightMode fontSize="small" />
            {t('light')}
          </IconToggleButton>
          <IconToggleButton value="dark" aria-label="dark mode">
            <DarkMode fontSize="small" />
            {t('dark')}
          </IconToggleButton>
        </ToggleButtonGroup>
      </Box>
      <Box sx={{ padding: '0 16px' }}>
        <Heading gutterBottom id="settings-mode">
          {t('language')}
        </Heading>
        <List>
          {languages.map((item) => (
            <ListItem key={item} disablePadding>
              <ListItemButton
                selected={lang === item}
                onClick={() => {
                  handleChangeLang(item)
                }}
              >
                <ListItemText primary={t(item)} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Box>
      <Box sx={{ padding: '0 16px' }}>
        <Heading gutterBottom id="settings-mode">
          color
        </Heading>
        <List>
          {presetPalette.map((item: any) => {
            const key = item && JSON.stringify(item)
            return (
              <ListItem key={key} disablePadding>
                <ListItemButton
                  selected={palatte === key}
                  onClick={() => {
                    handleChangeColor(key)
                  }}
                >
                  <ColorBar pale={item} />
                </ListItemButton>
              </ListItem>
            )
          })}
        </List>
      </Box>
    </MuiDrawer>
  )
}

export default SettingDrawer