import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

function App() {
  const showAntdModal = () => {
    // Show a modal with arguments passed to the component as props
    NiceModal.show(MyAntdModal, { name: 'Nate' }).then(res => {
        // do something
        console.log(res);
    });
  };
  return (
    <div className="app">
      <h1>Nice Modal Examples</h1>
      <div className="demo-buttons">
        <button onClick={showAntdModal}>Antd Modal</button>
      </div>
    </div>
  );
}

const DemoModal: React.FC = ({
    isModalVisible,
    setIsModalVisible,
    onChange,
    otherProps
}) => {
  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

const App: React.FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [others, setOthers] = useState(null);

  const showModal = () => {
    setIsModalVisible(true);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <DemoModal
        isModalVisible={isModalVisible}
        setModalVisible={setIsModalVisible}
        otherProps={{ name: '123' }}
        onChange={setOthers}
      />
    </>
  );
};