import {Modal, ModalSelect} from '@components';
import {FC, useMemo} from 'react';
import {useFormState} from './hooks';
import {useDictionaryOptions, useStorageOptions} from '@hooks';

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

const PutInModal: FC<Props> = function (props) {
  const [{control, isLoading}, {onSubmit, watch, setValue}] =
    useFormState(props);
  const {data: warehouse, isFetching: isWarehouseFetching} =
    useDictionaryOptions('仓库');
  const warehouseOptions = useMemo(
    function () {
      return warehouse.filter(val => val?.type === '1');
    },
    [warehouse],
  );
  const warehouseId = watch('warehouse');
  const {data: storageOptions, isFetching} = useStorageOptions(
    false,
    state => state.storageLocationCode,
    {
      id: warehouseId,
      clear() {
        setValue('location', '');
      },
    },
  );

  return (
    <Modal
      {...props}
      title='选择库位信息'
      onSubmit={onSubmit}
      isLoading={isLoading}
      testId='semi_report_modal'
    >
      <ModalSelect
        data={warehouseOptions}
        control={control}
        label='所属仓库'
        name='warehouse'
        loading={isWarehouseFetching}
      />
      <ModalSelect
        data={storageOptions}
        control={control}
        label='所属库位'
        name='location'
        loading={isFetching}
      />
    </Modal>
  );
};

export default PutInModal;
