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

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

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

  return (
    <Modal
      visible={visible}
      title={`${id ? '修改' : '新增'}${type}`}
      onSubmit={onSubmit}
      onClose={onClose}
      testId='dicionary_modal'
      isLoading={isLoading}
    >
      <FormProvider {...formInstance}>
        <ErrorBoundary>
          <Suspense fallback={<Loading tip='正在获取' />}>
            <Info id={tldId} />
          </Suspense>
        </ErrorBoundary>
      </FormProvider>
    </Modal>
  );
};

export default PutModal;
