import * as React from 'react';
import PropTypes from 'prop-types';
import { Drawer } from 'tea-component';

const TeaDrawer = ({
  size,
  title,
  style,
  events,
  visible,
  subtitle,
  showMask,
  className,
  placement,
  extraSlot,
  footerSlot,
  childrenSlot,
  disableCloseIcon,
  outerClickClosable,
}) => {
  const eventsList = {
    onClose: () => events?.onClose && events.onClose({}),
    onExited: () => events?.onExited && events.onExited({}),
  };
  return (
    <Drawer
      size={size}
      title={title}
      style={style}
      visible={visible}
      extra={extraSlot}
      footer={footerSlot}
      subtitle={subtitle}
      showMask={showMask}
      className={className}
      placement={placement}
      disableCloseIcon={disableCloseIcon}
      outerClickClosable={outerClickClosable}
      {...eventsList}
    >
      {childrenSlot}
    </Drawer>
  );
};

TeaDrawer.propTypes = {
  style: PropTypes.object,
  visible: PropTypes.bool,
  title: PropTypes.string,
  showMask: PropTypes.bool,
  extraSlot: PropTypes.node,
  subtitle: PropTypes.string,
  footerSlot: PropTypes.node,
  className: PropTypes.string,
  childrenSlot: PropTypes.node,
  disableCloseIcon: PropTypes.bool,
  size: PropTypes.oneOf(['m', 'l']),
  outerClickClosable: PropTypes.bool,
  events: PropTypes.objectOf(PropTypes.func),
  placement: PropTypes.oneOf(['right', 'left']),
};

export default TeaDrawer;
export { TeaDrawer };
