import { CloseCircleOutlined, CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { Button, Modal, Space, Tabs } from 'antd';
import React, { useEffect, useState } from 'react'

const PopupDialog: React.FC<{
  onClose: () => void;
  width: number;
  title: React.ReactNode;
  data: any;
  render: (data: any, fullScreen: boolean) => React.ReactNode;
}> = ({ data, width, title, onClose, render }) => {

  const [fullscreen, setFullscreen] = useState(false);

  const FullBtn = fullscreen ? FullscreenExitOutlined : FullscreenOutlined;

  if (!data) {
    return null;
  }

  return (
    <Modal
      open
      title={(
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {title}
          <div style={{ flexGrow: 1 }}></div>
          <Space>
            <FullBtn style={{ cursor: 'pointer' }} onClick={() => setFullscreen(!fullscreen)} />
            <CloseOutlined style={{ cursor: 'pointer' }} onClick={() => { onClose(); setFullscreen(false); }} />
          </Space>
        </div>
      )}
      className={fullscreen ? 'fullscreen' : undefined}
      width={fullscreen ? undefined : width}
      onCancel={onClose}
      footer={null}
      closable={false}
      bodyStyle={{ padding: 0 }}
      destroyOnClose
      maskClosable={false}
    >
      {data ? render(data, fullscreen) : null}
    </Modal>
  )
}

export default PopupDialog