import React, { useCallback, useState } from 'react';
import { Modal, Button } from 'antd';
import { ModalProps } from 'antd/lib/modal';

export type ModalOverlayRender = (props: {
  close: () => void;
}) => React.ReactNode;
export type ModalChildrenRender = (props: {
  open: () => void;
}) => React.ReactNode;
/**
 * Modal触发器
 */
export const ModalTrigger: React.FC<{
  disabled?: boolean;
  overlay?: ModalOverlayRender;
  children?: ModalChildrenRender;
} & Omit<ModalProps, 'visible' | 'onCancel' | 'onOk'>> = props => {
  const { disabled } = props;
  const [vis, setVis] = useState(false);
  const open = useCallback(() => {
    if (disabled) return;
    setVis(true);
  }, [disabled]);
  const close = useCallback(() => setVis(false), []);
  const { children, overlay, ...modalProps } = props;
  return (
    <>
      <Modal
        {...modalProps}
        open={vis}
        onCancel={close}
        onOk={close}
        // footer={false}
        footer={
          <div>
            <Button className='ant-btn-custom-model' onClick={close}>
              Cancel
            </Button>
            <Button
              type='primary'
              className='ant-btn-custom-model'
              onClick={close}
            >
              Submit
            </Button>
          </div>
        }
        maskClosable={false}
      >
        {overlay ? overlay({ close }) : <></>}
      </Modal>
      {children && children({ open })}
    </>
  );
};

export default ModalTrigger;