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

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

const options = [
  {label: '正常', value: '0'},
  {label: '退货', value: '1'},
  {label: '换货', value: '2'},
];

const AddModal: FC<Props> = function (props) {
  const [{isFetching, data: materialOptions}, onMaterialSearch] =
    useDictionaryWidthCode('物料字典');
  const [{control, isLoading}, {onSubmit}] = useFormState({
    ...props,
    onSearch: onMaterialSearch,
  });
  const {data: corporationOptions, isFetching: corporationIsFetching} =
    useDictionaryOptions('公司', false, state => state.code);
  const {data: departmentOptions, isFetching: departmentIsFetching} =
    useDictionaryOptions('部门字典', false, state => state.code);
  const {data: unitOptions, isFetching: unitIsFetching} =
    useDictionaryOptions('计量单位');
  const type = useContextSection(context, state => state[0].type);

  return (
    <Modal
      {...props}
      isLoading={isLoading}
      title={`新增${type === '1' ? '' : '非'}生产领料单`}
      onSubmit={onSubmit}
      testId='production_requisition_modal'
    >
      <ModalField control={control} label='领料单ID' name='requestOrderId' />
      <ModalField control={control} label='领料单编号' name='requestOrderNo' />
      <ModalField control={control} label='生产订单号' name='prodOrderNo' />
      <ModalField
        control={control}
        label='申请类型名称'
        name='requestTypeName'
      />
      <ModalField
        control={control}
        label='申请类型编号'
        name='requestTypeNumber'
      />
      <ModalSelect
        control={control}
        label='物料'
        onSearch={onMaterialSearch}
        data={materialOptions}
        name='materialId'
        loading={isFetching}
      />
      <ModalSelect
        data={unitOptions}
        control={control}
        label='计量单位'
        name='measUnitId'
        loading={unitIsFetching}
      />
      <ModalField
        control={control}
        label='需求数量'
        name='orderCount'
        type='number'
      />
      <ModalSelect
        data={corporationOptions}
        control={control}
        label='所属公司'
        name='companyNo'
        loading={corporationIsFetching}
      />
      <ModalSelect
        control={control}
        label='退换货类型'
        name='ifCommodity'
        data={options}
      />
      <ModalDate control={control} label='申请日期' name='requestDate' />
      <ModalSelect
        data={departmentOptions}
        control={control}
        label='领用部门'
        name='useDepartment'
        loading={departmentIsFetching}
      />
      <ModalField control={control} label='分录号' name='entryNumber' />
      <ModalField
        control={control}
        label='WBS编号'
        name='WBS'
        required={false}
      />
    </Modal>
  );
};

export default AddModal;
