import React from "react";
import { CloseOutlined } from "@easyv/react-icons";
import { Drawer } from "antd";
import classNames from "classnames";
import isString from "lodash/isString";
import styles from "./index.less";

export default ({ className, closable, onClose, title, ...props }) => {
  const isNewTitle = title && isString(title);
  const newTitle = isNewTitle ? <CustomTitle title={title} onClose={onClose} /> : title;

  const filterProps = isNewTitle
    ? {
        closable: false,
      }
    : {
        closable,
        onClose,
      };

  return (
    <Drawer
      className={classNames(className, styles.drawer, { [styles.newTitle]: isNewTitle })}
      title={newTitle}
      {...filterProps}
      width={400}
      {...props}
    />
  );
};

function CustomTitle({ title, onClose }) {
  return (
    <div className={styles.customTitle}>
      <span>{title}</span>
      <span className={styles.icon} onClick={onClose}>
        <CloseOutlined />
      </span>
    </div>
  );
}