import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
import {FC, Suspense} from 'react';
import {useFormState} from './hooks';
import Info from './Info';
import {FormProvider} from 'react-hook-form';

const styles: ReactModalStyle = {
  content: {width: '540px', height: '560px'},
};

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

const PubModal: FC<Props> = function({visible, onClose, onFetch, id}) {
  const [{formInstance, isLoading}, onSubmit] = useFormState({onClose, onFetch, id, visible});

  return (
    <Modal
      style={styles}
      visible={visible}
      title={`${id ? '修改' : '新增'}容器`}
      hideBtnGroup
      onClose={onClose}
      onSubmit={onSubmit}
      testId='container_modal'
    >
      <FormProvider {...formInstance}>
        <ErrorBoundary>
          <Suspense fallback={<Loading tip='正在获取容器信息' />}>
            <Info id={id} />
            <ModalBtnGroup onClose={onClose} isLoading={isLoading} />
          </Suspense>
        </ErrorBoundary>
      </FormProvider>
    </Modal>
  );
};

export default PubModal;
