import React, { useContext } from 'react';
import { Drawer as OldDrawer, DrawerProps, ConfigProvider } from 'antd';
import './index.less';
import classNames from 'classnames';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { AOP } from '../utils/AOP';
import { translate } from '../utils/index';

interface DrawerExtraProps {
  onCancel?: (
    e: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>,
  ) => void;
  onOk?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}

const Drawer = ({
  title,
  closable = true,
  width = '400px',
  footer,
  onOk,
  onCancel,
  closeIcon,
  extra,
  className,
  ...props
}: DrawerProps & DrawerExtraProps) => {
  const { getPrefixCls, locale } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-drawer');

  const newOnCancel = new AOP<
    React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>,
    void
  >(onCancel)
    .after((e) => {
      props.onClose?.(e);
    })
    .getFunction();

  const getIcon = () => {
    if (!closable) {
      return null;
    } else {
      return (
        <div
          onClick={props.onClose}
          className={classNames(`${prefixCls}-closeIcon`)}
        >
          {closeIcon ?? <Icon iconName="CloseSmall" />}
        </div>
      );
    }
  };

  const getTitle = () => {
    return (
      <div className={classNames(`${prefixCls}-title`)}>
        {title}
        <div className={classNames(`${prefixCls}-extra`)}>
          {extra}
          {getIcon()}
        </div>
      </div>
    );
  };

  // const getHeaderStyle = () => {
  //   return {
  //     padding: '16px',
  //     borderBottom: '1px solid transparent',
  //     ...headerStyle,
  //   };
  // };

  // const getBodyStyle = () => {
  //   return {
  //     padding: '8px 16px',
  //     ...bodyStyle,
  //   };
  // };

  const getFooter = () => {
    if (footer === true) {
      return (
        <div className={classNames(`${prefixCls}-footer`)}>
          <Button key="cancel" type="secondary" onClick={newOnCancel}>
            {translate('packages.base.src.Notification.index.取消')}
          </Button>
          <Button
            className={`${prefixCls}-footer-okBtn`}
            key="ok"
            onClick={(e) => {
              onOk?.(e);
            }}
            type="primary"
          >
            {translate('packages.base.src.Notification.index.确定')}
          </Button>
        </div>
      );
    } else {
      return footer;
    }
  };

  return (
    <OldDrawer
      {...props}
      title={getTitle()}
      footer={getFooter()}
      closable={false}
      width={width}
      className={classNames(
        `${prefixCls}-box`,
        title ? 'hasTitle' : 'noTitle',
        className,
      )}
    ></OldDrawer>
  );
};

export { Drawer };