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

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

const poTypeOptions = [
  {label: '采购订单', value: 'NB'},
  {label: '退货采购订单', value: 'RB'},
];

const AddModal: FC<Props> = function ({visible, onClose, onFetch}) {
  const [
    {data: materialOptions, isFetching: isMaterialFetching},
    onMaterialSearch,
  ] = useDictionaryWidthCode('物料字典');
  const [
    {data: supplierOptions, isFetching: isSupplierFetching},
    onSupplierSearch,
  ] = useDictionaryWidthCode('供应商/客户', {
    findValue: state => state.code,
  });
  const [{control, isLoading}, {onSubmit}] = useFormState({
    visible,
    onClose,
    onFetch,
    onSearch() {
      onMaterialSearch('');
      onSupplierSearch('');
    },
  });
  const {data: corporationOptions, isFetching: isCorporationFetching} =
    useDictionaryOptions('公司', false, state => state.code);
  const {data: measUnitOptions, isFetching: isMeasUnitFetching} =
    useDictionaryOptions('计量单位');

  return (
    <Modal
      visible={visible}
      onClose={onClose}
      title='新增质检单'
      onSubmit={onSubmit}
      isLoading={isLoading}
      testId='quality_modal'
    >
      <ModalField name='poId' label='采购单ID' control={control} />
      <ModalField name='poNo' label='采购单编号' control={control} />
      <ModalSelect
        data={materialOptions}
        control={control}
        label='物料'
        name='materialId'
        onSearch={onMaterialSearch}
        loading={isMaterialFetching}
      />
      <ModalSelect
        data={measUnitOptions}
        control={control}
        label='计量单位'
        name='measUnitId'
        loading={isMeasUnitFetching}
      />
      <ModalField
        name='purchaseCount'
        label='采购数量'
        control={control}
        type='number'
      />
      <ModalField
        name='receiveCount'
        label='收货数量'
        control={control}
        type='number'
      />
      <ModalField
        name='curOkCount'
        label='合格品数量'
        control={control}
        type='number'
      />
      <ModalField
        name='curNgCount'
        label='不合格品数量'
        control={control}
        type='number'
      />
      <ModalSelect
        data={supplierOptions}
        control={control}
        label='供应商'
        name='supplierNo'
        onSearch={onSupplierSearch}
        loading={isSupplierFetching}
      />
      <ModalSelect
        data={corporationOptions}
        control={control}
        label='公司'
        name='companyNo'
        loading={isCorporationFetching}
      />
      <ModalDate control={control} label='订单日期' name='poDate' />
      <ModalSelect
        data={poTypeOptions}
        name='poType'
        label='订单类型'
        control={control}
      />
      <ModalField name='entryNumber' label='分录号' control={control} />
      <ModalField
        name='WBS'
        label='WBS编号'
        control={control}
        required={false}
      />
    </Modal>
  );
};

export default AddModal;
