/**
 * @deprecated Use `Drawer` from `@material-hu/components/design-system/Drawer` instead.
 * Hugo Drawer uses a composition API — map local sub-components as follows:
 * - `BasicDrawer.Container` → `Drawer.Wrapper`
 * - `BasicDrawer.Title` → `Drawer.Header`
 * - `BasicDrawer.Content` → `Drawer.Body`
 * - `BasicDrawer.Actions` → `Drawer.Actions`
 */
import { FC, PropsWithChildren } from 'react';

import Close from '@material-hu/icons/material/Close';
import IconButton from '@material-hu/mui/IconButton';
import Stack, { StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

export type ContainerProps = PropsWithChildren<StackProps>;

export const Container: FC<ContainerProps> = props => {
  const { children, ...stackProps } = props;

  return (
    <Stack
      {...stackProps}
      sx={{
        height: '100%',
        ...stackProps?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export type TitleProps = PropsWithChildren<
  StackProps & {
    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  }
>;

export const Title: FC<TitleProps> = props => {
  const { onClose, children, ...stackProps } = props;

  const { t } = useLokaliseTranslation(['general']);
  const theme = useTheme();

  return (
    <Stack
      {...stackProps}
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 1,
        p: 3,
        pb: 0,
        '& .MuiIconButton-root': {
          mt: theme.spacing(-1),
          mr: theme.spacing(-1),
        },
        ...stackProps?.sx,
      }}
    >
      <Typography variant="h6">{children}</Typography>
      <Tooltip title={t('close')}>
        <IconButton
          onClick={onClose}
          arial-label={t('close')}
        >
          <Close />
        </IconButton>
      </Tooltip>
    </Stack>
  );
};

export type ContentProps = PropsWithChildren<StackProps>;

export const Content: FC<ContentProps> = props => {
  const { children, ...stackProps } = props;

  return (
    <Stack
      {...stackProps}
      sx={{
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        p: 3,
        overflow: 'scroll',
        ...stackProps?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export type ActionsProps = PropsWithChildren<StackProps>;

export const Actions: FC<ActionsProps> = props => {
  const { children, ...stackProps } = props;

  return (
    <Stack
      {...stackProps}
      sx={{
        flexDirection: 'row',
        justifyActions: 'space-around',
        alignItems: 'flex-end',
        flexGrow: 1,
        gap: 1,
        py: 2,
        px: 3,
        ...stackProps?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export const BasicDrawer = {
  Container,
  Title,
  Content,
  Actions,
};

export default BasicDrawer;