import React from 'react';
import { Modal } from 'antd';
import { CloseOutlined } from '@easyv/react-icons';
import { useRecoilState } from 'recoil';

import Loading from '@/components/Loading';
import { _themeLoading } from '@/pages/module';

export interface AllScreenModalProp {
  title?: string;
  children: React.ReactNode;
  onClose?: () => void;
}

// eslint-disable-next-line import/no-mutable-exports
export let AllScreenModalzIndex = 100;

export default function AllScreenModal({ title, children, onClose }: AllScreenModalProp) {
  const [themeLoading] = useRecoilState(_themeLoading);

  return (
    <Modal
      visible
      maskClosable={false}
      closable={false}
      footer={null}
      title={null}
      zIndex={AllScreenModalzIndex++}
      width="100vw"
      style={{
        margin: 0,
        height: '100vh',
        maxWidth: '100vw',
        top: 0,
        padding: 0,
        overflow: 'hidden',
      }}
      bodyStyle={{
        padding: 0,
        height: '100vh',
      }}>
      <div className="h-full flex flex-col">
        <div className="flex items-center justify-center bg-bgColorSecondary h-16 text-white">
          <span className="text-base">{title}</span>
          <span className="anticon cursor-pointer absolute right-6 text-lg" onClick={onClose}>
            <CloseOutlined />
          </span>
        </div>
        <div className="flex-auto bg-bgColorMain">{children}</div>
      </div>
      {themeLoading && <Loading />}
    </Modal>
  );
}