import ArrowBackIcon from '@material-hu/icons/material/ArrowBack';
import CloseIcon from '@material-hu/icons/material/Close';
import Drawer from '@material-hu/mui/Drawer';
import IconButton from '@material-hu/mui/IconButton';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

type SidebarProps = DrawerProps & {
  title: string;
  onGoBack?: () => void;
  hasNavbar?: boolean;
  actionsButtonProps?: {
    cancel?: ButtonProps;
    confirm: ButtonProps;
  };
  size?: 'medium' | 'small';
  onClose?: () => void;
};

const Sidebar = ({
  open,
  onClose,
  onGoBack,
  title,
  children,
  actionsButtonProps,
  hasNavbar = false,
  size = 'medium',
  ...other
}: SidebarProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const { navbarHeight } = useLayoutMetrics();
  return (
    <Drawer
      anchor="right"
      open={open}
      onClose={onClose}
      {...other}
      PaperProps={{
        ...other.PaperProps,
        sx: {
          borderRadius: '16px 0 0 16px',
          width: { medium: '600px', small: '360px' }[size],
          ...(hasNavbar && {
            height: `calc(100% - ${navbarHeight}px)`,
            top: `${navbarHeight}px`,
          }),
          ...other.PaperProps?.sx,
        },
      }}
    >
      <Stack
        sx={{
          height: '100%',
          overflowY: 'auto',
          justifyContent: 'space-between',
          gap: 2,
        }}
      >
        <Paper
          component={Stack}
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            p: 3,
            py: 2,
            position: 'sticky',
            zIndex: theme => theme.zIndex.drawer + 1,
            top: 0,
            backgroundColor: theme =>
              theme.palette.new.background.elements.default,
          }}
          variant="outlined"
          square
        >
          {onGoBack && (
            <IconButton onClick={onGoBack}>
              <ArrowBackIcon />
            </IconButton>
          )}
          <Typography variant="h6">{title}</Typography>
          <IconButton onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Paper>
        <Stack sx={{ flex: 1, px: 2 }}>{children}</Stack>
        {actionsButtonProps && (
          <Paper
            component={Stack}
            variant="outlined"
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              px: 3,
              py: 2,
              position: 'sticky',
              bottom: 0,
              zIndex: theme => theme.zIndex.drawer + 1,
              backgroundColor: theme =>
                theme.palette.new.background.elements.default,
            }}
            square
          >
            {actionsButtonProps.cancel && (
              <Button
                fullWidth
                {...actionsButtonProps.cancel}
              >
                {actionsButtonProps.cancel.children ?? t('general:cancel')}
              </Button>
            )}
            <Button
              variant="contained"
              fullWidth
              {...actionsButtonProps.confirm}
            >
              {actionsButtonProps.confirm.children ?? t('CONFIRM')}
            </Button>
          </Paper>
        )}
      </Stack>
    </Drawer>
  );
};

export default Sidebar;