import {Modal, ModalField, 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 PutOutModal: FC<Props> = function (props) {
  const [{control, isLoading}, {onSubmit, watch, setValue}] =
    useFormState(props);
  const {data: warehouse, isFetching: isWarehoseFetching} =
    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_draw_modal'
    >
      <ModalField
        label='出库数量'
        type='number'
        name='outNum'
        control={control}
      />
      <ModalSelect
        data={warehouseOptions}
        control={control}
        label='所属仓库'
        name='warehouse'
        loading={isWarehoseFetching}
      />
      <ModalSelect
        data={storageOptions}
        loading={isFetching}
        control={control}
        label='所属库位'
        name='location'
      />
    </Modal>
  );
};

export default PutOutModal;