import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
import { Sun1, Moon } from 'iconsax-react';
import { useTranslation } from 'react-i18next';
import { Icon } from '@rkheftan/harmony-ui';
import { type MouseEvent } from 'react';

enum ThemeMode {
  Light = 'light',
  Dark = 'dark',
}

interface ThemeToggleButtonProps {
  value: 'light' | 'dark';
  onChange: (newMode: 'light' | 'dark') => void;
}

export const ThemeToggleButton = ({
  value,
  onChange,
}: ThemeToggleButtonProps) => {
  const { t } = useTranslation('setting');

  const handleChange = (
    _event: MouseEvent<HTMLElement>,
    newMode: 'light' | 'dark' | null,
  ) => {
    if (newMode !== null) {
      onChange(newMode);
    }
  };

  return (
    <Box>
      <ToggleButtonGroup
        value={value}
        exclusive
        color="primary"
        onChange={handleChange}
        size="medium"
        sx={{
          borderRadius: 1.5,
          border: '1px solid',
          borderColor: 'divider',
          overflow: 'hidden',
        }}
      >
        <ToggleButton
          value={ThemeMode.Light}
          aria-label="light theme"
          sx={{
            textTransform: 'none',
            display: 'flex',
            gap: 1,
            px: 2,
            py: 1,
          }}
        >
          <Icon Component={Sun1} color="primary.main" variant="Bold" />
          {t('settings.light')}
        </ToggleButton>

        <ToggleButton
          value={ThemeMode.Dark}
          aria-label="dark theme"
          sx={{
            textTransform: 'none',
            display: 'flex',
            gap: 1,
            px: 2,
            py: 1,
          }}
        >
          <Icon Component={Moon} size="medium" color="primary.light" />
          {t('settings.dark')}
        </ToggleButton>
      </ToggleButtonGroup>
    </Box>
  );
};