import {Modal, ModalDate, ModalField, ModalSelect} from '@components';
import {useDictionaryOptions, useDictionaryWidthCode} from '@hooks';
import {FC} from 'react';
import {useFormState} from './hooks';

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

const AddModal: FC<Props> = function (props) {
  const [{data: materialOptions, isFetching}, onMaterialSearch] =
    useDictionaryWidthCode('物料字典');
  const [{isLoading, control}, {onSubmit}] = useFormState({
    ...props,
    onSearch: onMaterialSearch,
  });
  const {data: storageOptions, isFetching: isStorageFetching} =
    useDictionaryOptions('仓库');
  const {data: utilsOptions, isFetching: isUnitsFetching} =
    useDictionaryOptions('计量单位');
  const {data: corporationOptions, isFetching: isCorporationFetching} =
    useDictionaryOptions('公司', false, state => state.code);

  return (
    <Modal
      title='新增移库单'
      {...props}
      isLoading={isLoading}
      onSubmit={onSubmit}
      testId='relocation_modal'
    >
      <ModalField
        label='移库通知单ID'
        name='transferNoticeOrderId'
        control={control}
      />
      <ModalField
        label='移库通知单号'
        name='transferNoticeOrderNo'
        control={control}
      />
      <ModalSelect
        control={control}
        data={materialOptions}
        onSearch={onMaterialSearch}
        label='物料'
        name='materialId'
        loading={isFetching}
      />
      <ModalField
        label='移库数量'
        name='orderCount'
        control={control}
        type='number'
      />
      <ModalSelect
        control={control}
        data={utilsOptions}
        label='计量单位'
        name='measUnitId'
        loading={isUnitsFetching}
      />
      <ModalSelect
        control={control}
        data={storageOptions}
        label='要货仓库'
        name='requestWarehouseId'
        loading={isStorageFetching}
      />
      <ModalSelect
        control={control}
        data={storageOptions}
        label='供货仓库'
        name='supplyWarehouseId'
      />
      <ModalDate control={control} label='单据日期' name='docDate' />
      <ModalField label='分录号' name='entryNo' control={control} />
      <ModalSelect
        control={control}
        data={corporationOptions}
        label='所属公司'
        name='accountSleeve'
        loading={isCorporationFetching}
      />
      <ModalField
        label='WBS编号'
        name='WBS'
        required={false}
        control={control}
      />
    </Modal>
  );
};

export default AddModal;
