import { type FC } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import SwipeableDrawer from '@material-hu/mui/SwipeableDrawer';

import Title from '@material-hu/components/design-system/Title';

import Puller from './Puller';
import { type MobileDialogProps } from './types';
import { CLOSE_ICON_SIZE } from './constants';

// biome-ignore lint/suspicious/noEmptyBlockStatements: required by SwipeableDrawer onOpen prop
const noop = () => {};

const MobileDialog: FC<MobileDialogProps> = ({
  open,
  onClose,
  title,
  children,
}) => (
  <SwipeableDrawer
    anchor="bottom"
    open={open}
    onClose={onClose}
    onOpen={noop}
    PaperProps={{
      sx: {
        borderRadius: 0,
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        maxHeight: 'calc(100vh - 56px)',
      },
    }}
    disableSwipeToOpen
  >
    <Puller />
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        px: 2,
        mt: 3,
        mb: 1,
        height: 40,
        position: 'relative',
      }}
    >
      <Title
        variant="S"
        title={title}
        sx={{
          position: 'absolute',
          left: 0,
          right: 0,
          pointerEvents: 'none',
        }}
        centered
      />
      <Box sx={{ ml: 'auto' }} />
      <IconButton
        onClick={onClose}
        sx={{ p: 0 }}
        disableRipple
      >
        <IconX size={CLOSE_ICON_SIZE} />
      </IconButton>
    </Stack>
    {children}
  </SwipeableDrawer>
);

export default MobileDialog;
