import 'core-js/modules/es.object.assign.js';
import { __rest } from '../../../_virtual/_tslib.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Box, Drawer as Drawer$1, Divider } from '@mui/material';
import { IconButton } from '../../atom/Button/IconButton.js';
import { IconFont } from '../../atom/IconFont/IconFont.js';
import { Typography } from '../../atom/Typography/Typography.js';

const Drawer = _a => {
  var {
      open,
      title,
      content,
      buttonsBar,
      HeaderContents,
      hasTopDivider,
      hasBottomDivider,
      hasBottomButtons,
      onClose
    } = _a,
    props = __rest(_a, ["open", "title", "content", "buttonsBar", "HeaderContents", "hasTopDivider", "hasBottomDivider", "hasBottomButtons", "onClose"]);
  return jsx(Box, Object.assign({
    sx: open ? {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      zIndex: 50,
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      backdropFilter: 'blur(4px)'
    } : {}
  }, {
    children: jsx(Drawer$1, Object.assign({
      open: open,
      onClose: onClose,
      variant: "persistent"
    }, props, {
      children: jsxs(Box, Object.assign({
        display: "flex",
        flexDirection: "column",
        gap: hasTopDivider ? 2 : 4,
        sx: {
          width: {
            xs: '100vw',
            md: '530px'
          },
          height: {
            xs: '100vh',
            md: '100%'
          }
        }
      }, {
        children: [jsxs(Box, Object.assign({
          display: "flex",
          flexDirection: "column",
          sx: {
            px: {
              xs: 3,
              md: 4
            },
            pt: {
              xs: 3,
              md: 4
            },
            pd: {
              xs: 2,
              md: 3
            }
          }
        }, {
          children: [jsxs(Box, Object.assign({
            display: "flex",
            alignItems: 'center',
            sx: {
              position: 'relative',
              height: 48
            }
          }, {
            children: [HeaderContents, onClose != null && jsx(IconButton, Object.assign({
              variant: "text",
              color: "primary",
              onClick: onClose,
              sx: {
                display: 'flex',
                position: 'absolute',
                top: 0,
                right: 0,
                alignSelf: 'flex-end',
                width: 3,
                p: 0
              }
            }, {
              children: jsx(IconFont, {
                name: "close",
                fontSize: 24
              })
            }))]
          })), title && jsx(Typography, Object.assign({
            variant: "h3"
          }, {
            children: title
          }))]
        })), hasTopDivider && jsx(Divider, {}), jsx(Box, Object.assign({
          sx: {
            position: 'relative',
            overflowY: 'auto',
            height: 'auto'
          }
        }, {
          children: content
        })), hasBottomDivider && jsx(Divider, {
          className: "flex md:hidden"
        }), jsx(Box, Object.assign({
          display: "flex",
          alignItems: 'flex-end',
          justifyContent: "flex-end",
          sx: Object.assign({
            width: '100%',
            p: {
              xs: 3,
              md: 4
            },
            gap: {
              xs: 2,
              md: 4
            },
            flexDirection: {
              xs: 'column-reverse',
              md: 'row'
            }
          }, hasBottomButtons ? {
            position: 'absolute',
            bottom: 0
          } : {})
        }, {
          children: buttonsBar
        }))]
      }))
    }))
  }));
};

export { Drawer, Drawer as default };
