import { useState } from 'react';

import ChevronRight from '@material-hu/icons/material/ChevronRight';
import Close from '@material-hu/icons/material/Close';
import Drawer from '@material-hu/mui/Drawer';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { DrawerProps } from '@material-hu/components/design-system/Drawer/types';

import { useLayoutMetrics } from 'src/contexts/LayoutMetricsContext';
import useNewTheme from 'src/hooks/useNewTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

import NotificationSettingsDrawer from './NotificationSettingsDrawer';
import SegmentSettingsDrawer from './SegmentSettingsDrawer';

type SettingItemProps = {
  title: string;
  description: string;
  onClick: () => void;
};

const SettingItem = ({ title, description, onClick }: SettingItemProps) => (
  <Stack
    sx={{
      alignItems: 'center',
      justifyContent: 'space-between',
      p: 2,
      bgcolor: theme => theme.palette.grey[50],
      gap: 2,
      flexDirection: 'row',
    }}
    component={Button}
    onClick={onClick}
  >
    <Stack sx={{ gap: 1, alignItems: 'flex-start' }}>
      <Typography
        sx={{
          fontWeight: 'fontWeightMedium',
          color: theme => theme.palette.text.primary,
        }}
      >
        {title}
      </Typography>
      <Typography
        variant="body2"
        color="secondary"
        sx={{ textAlign: 'left' }}
      >
        {description}
      </Typography>
    </Stack>
    <ChevronRight />
  </Stack>
);

const SETTINGS = [
  {
    id: 'notification',
    titleKey: 'CONFIG_NOTIFICATIONS',
    descriptionKey: 'SET_TIME_SUBTITLE',
  },
  {
    id: 'segmentation',
    titleKey: 'SEGMENT_BIRTHDAY',
    descriptionKey: 'SEGMENT_BIRTHDAY_DESCRIPTION',
  },
];

type BirthdaySettingsDrawerProps = DrawerProps & {
  onClose: () => void;
};

const BirthdaySettingsDrawer = (props: BirthdaySettingsDrawerProps) => {
  const { open, onClose } = props;
  const [openDrawer, setOpenDrawer] = useState<string | null>(null);
  const { navbarHeight } = useLayoutMetrics();
  const { t } = useLokaliseTranslation('apps');
  const NewThemeProvider = useNewTheme();

  const handleGoBack = () => {
    setOpenDrawer(null);
  };

  const handleClose = () => {
    handleGoBack();
    onClose();
  };

  return (
    <NewThemeProvider>
      <Drawer
        anchor="right"
        PaperProps={{
          sx: {
            height: '100%',
            top: navbarHeight,
            maxHeight: `calc(100vh - ${navbarHeight}px)`,
            width: 600,
            borderTopLeftRadius: theme => theme.spacing(2),
          },
        }}
        {...props}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            justifyContent: 'space-between',
            p: 3,
            pt: 3,
            pb: 2,
            borderBottom: '1px solid',
            borderColor: theme => theme.palette.grey[100],
            alignItems: 'center',
          }}
        >
          <Typography
            variant="h6"
            sx={{ mb: 1 }}
          >
            {t('BIRTHDAY')}
          </Typography>
          <IconButton
            onClick={onClose}
            edge="end"
          >
            <Close />
          </IconButton>
        </Stack>
        <Stack sx={{ gap: 2, p: 3 }}>
          {SETTINGS.map(setting => (
            <SettingItem
              key={setting.id}
              title={t(setting.titleKey)}
              description={t(setting.descriptionKey)}
              onClick={() => setOpenDrawer(setting.id)}
            />
          ))}
        </Stack>
        <NotificationSettingsDrawer
          open={openDrawer === 'notification'}
          onGoBack={handleGoBack}
          onClose={handleClose}
          slotProps={{
            backdrop: {
              invisible: open,
            },
          }}
        />
        <SegmentSettingsDrawer
          open={openDrawer === 'segmentation'}
          onGoBack={handleGoBack}
          onClose={handleClose}
          slotProps={{
            backdrop: {
              invisible: open,
            },
          }}
        />
      </Drawer>
    </NewThemeProvider>
  );
};

export default BirthdaySettingsDrawer;