import {ModalSelect} from '@components';
import {FC} from 'react';
import {useFormContextState, useWatchId} from './hooks';
import {
  useDictionaryOptions,
  useDictionaryWidthCode,
  useStorageOptions,
} from '@hooks';

type Props = {id: string};

const Info: FC<Props> = function ({id}) {
  const [{data: materialOptions, isFetching}, onMaterialSearch] =
    useDictionaryWidthCode('物料字典', {
      findValue: state => state.code,
    });
  useWatchId(id, onMaterialSearch);

  const {control, watch, setValue} = useFormContextState();
  const {data: warehouseOptions, isFetching: warehouseIsFetching} =
    useDictionaryOptions('仓库');
  const warehouseId = watch('warehouseId');
  const {data: storageOtions, isFetching: isStorageFetching} =
    useStorageOptions(false, state => state.storageLocationCode, {
      id: warehouseId,
      clear() {
        setValue('storageLocationCode', '');
      },
    });

  return (
    <>
      <ModalSelect
        name='wllbCode'
        label='物料编号'
        control={control}
        data={materialOptions}
        onSearch={onMaterialSearch}
        loading={isFetching}
      />
      <ModalSelect
        name='warehouseId'
        label='所属仓库'
        control={control}
        data={warehouseOptions}
        loading={warehouseIsFetching}
      />
      <ModalSelect
        name='storageLocationCode'
        label='所属库位'
        control={control}
        data={storageOtions}
        loading={isStorageFetching}
      />
    </>
  );
};

export default Info;
