import {ModalSelect} from '@components';
import {FC} from 'react';
import {FormState, useWatchId} from './hooks';
import {useDictionaryWidthCode, useUserOptions} from '@hooks';
import {useFormContext} from 'react-hook-form';

type Props = {
  id: string;
};

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

  return (
    <>
      <ModalSelect
        control={control}
        label='员工姓名'
        name='userId'
        data={userOptions}
      />
      <ModalSelect
        name='materialId'
        label='物料编号'
        control={control}
        data={materialOptions}
        onSearch={onMaterialSearch}
        loading={isFetching}
      />
    </>
  );
};

export default Info;
