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

const style: ReactModal.Styles = {
  content: {
    width: '550px',
    height: '630px',
  },
};

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

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

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

export default StorageModal;
