import React, { useRef } from 'react';
import { Drawer as ADrawer, Button } from 'antd';
import './index.less';

const Drawer = ({ className = '', hasFooter = true, customFooter, onClose, onOk, cancelText = '取消', okText = '确认', style = {}, ...props }) => {
  const domRef = useRef(null);
  return (
    <>
      <div ref={domRef} style={{ position: 'fixed', zIndex: 200, left: 0, top: 0 }}></div>
      {React.cloneElement(<ADrawer style={{ ...style, textAlign: 'left' }} />, { onClose, className, getContainer: () => domRef.current, footer: customFooter ? customFooter : <Footer hasFooter={hasFooter} onClose={onClose} onOk={onOk} cancelText={cancelText} okText={okText} />, ...props })}
    </>
  );
};

function Footer({ hasFooter, onClose, cancelText, okText, onOk }) {
  return hasFooter ? (
    <div style={{ textAlign: 'right' }}>
      <Button onClick={onClose} style={{ marginRight: 8 }}>
        {cancelText}
      </Button>
      <Button onClick={onOk} type="primary">
        {okText}
      </Button>
    </div>
  ) : null;
}

export default Drawer;
