import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
import {FC, Suspense} from 'react';
import ReactModal from 'react-modal';
import Info from './Info';
import {useSubmit, useTransfer} from './hooks';

const modalStyle: ReactModal.Styles = {
  content: {width: '600px', height: '420px'},
};

type Props = {
  id: string;
  onClose: () => void;
  onFetch: () => void;
  visible: boolean;
};

const PdaMenuModal: FC<Props> = function({id, onClose, onFetch, visible}) {
  const [selected, onChange] = useTransfer(id);
  const [isLoading, onSubmit] = useSubmit({selected, id, onFetch, onClose});

  return (
    <Modal
      title='PDA菜单权限'
      visible={visible}
      style={modalStyle}
      hideBtnGroup
      testId='role_pda_menu_modal'
      onSubmit={onSubmit}
      onClose={onClose}
    >
      <ErrorBoundary>
        <Suspense fallback={<Loading tip='正在获取菜单' height='200px' />}>
          <Info selected={selected} onChange={onChange} />
          <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
        </Suspense>
      </ErrorBoundary>
    </Modal>
  );
};

export default PdaMenuModal;
