import React, { useEffect, useState } from 'react';
import { AutoComplete, Button, Select, Card, Col, DatePicker, Row, Form, Input, Descriptions, Radio, Modal } from 'antd';
import moment from 'moment';
import { GrnData, AntibiotsMicrobiologyInfo, GrnVehicleInfo } from '@gtpl/shared-models/raw-material-procurement';
import { RMGrnService, AntiBioticsReportService, IndentService } from '@gtpl/shared-services/raw-material-procurement';
import TextArea from 'antd/lib/input/TextArea';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
// import './anti-biotics-microbiology-form.css';
import { AllocatedLab, OperationTypeEnum, PassOrFail, PlantsEnum } from '@gtpl/shared-models/common-models';
import { ProductDto } from '@gtpl/shared-models/masters';
import { EmployeeService, ProductService } from '@gtpl/shared-services/masters';
import { ProductRequest } from '@gtpl/shared-models/masters';
import { UnitcodeService } from "@gtpl/shared-services/masters";
import { PlantsDropDown } from '@gtpl/shared-models/masters';
import { Capacitor } from '@capacitor/core';
import { LotCodeOpsData } from 'libs/shared-models/production-management/src/lib/lot-code-ops';
import {  LotNumberRequest } from '@gtpl/shared-models/production-management';
const { Option } = Select;
/* eslint-disable-next-line */
export interface AntiBioticsMicrobiologyFormProps {
  isModalVisible:boolean;
  setIsModalVisible:React.Dispatch<React.SetStateAction<boolean>>;
  setSelectedRecord:React.Dispatch<React.SetStateAction<number>>;
  grnInfo: GrnData;
  type:string
  handleCancel: () => void;
  isUpdating:boolean
  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
}

export function AntiBioticsMicrobiologyForms(
  props: AntiBioticsMicrobiologyFormProps
) {
  console.log(props.grnInfo,'grninfo');
  console.log(props.type,'ssssssss')
  const [testingInfo] = Form.useForm();
  const [btnDisable, setBtnDisable] = useState<boolean>(false);
  const [rmInfo, setRmInfo] = useState<GrnVehicleInfo>();
  const rmGrnService = new RMGrnService();
  const hrmsService = new EmployeeService();
  const indentService = new IndentService()
  const antiMicroTInfoService = new AntiBioticsReportService();
const [lotNumber,setLotNumber] = useState<LotCodeOpsData>();
  const [productData, setProductData] = useState<ProductDto>();
  const productService = new ProductService();
  const [capState, setCapState] = useState<PassOrFail>();
  const [ employees,setEmployees] = useState([])
  const [oazState, setOazState] = useState<PassOrFail>();
  const [amozState, setAmozState] = useState<PassOrFail>();
  const [ahdState, setAhdState] = useState<PassOrFail>();
  const [semState, setSemState] = useState<PassOrFail>();
  const [overallResult, setOverallResult] = useState<PassOrFail>();
  
 
  const [plantData, setPlantData] = useState<PlantsDropDown[]>([]);
  const unitService = new UnitcodeService();

  

  useEffect(() => {
    // if (props.grnInfo && Object.keys(props.grnInfo).length > 0) {
      getGrnInfoByItemId();
      getAllEmployees();
    
  }, [props.grnInfo]);
  


  useEffect(() => {
    testingInfo.setFieldsValue({
      cap: capState,
      AOZ: oazState,
      AMOZ: amozState,
      AHD: ahdState,
      SEM: semState,
    });
  }, [capState, oazState, amozState, ahdState, semState]);

  useEffect(() => {
    if (props.grnInfo && Object.keys(props.grnInfo).length > 0) {
      testingInfo.setFieldsValue({
        allotedLab: props.grnInfo.allotedLab, 
        samplerName: props.grnInfo.samplerName,
        location: props.grnInfo.location,
        remarks:props.grnInfo.remarks,
        labName:props.grnInfo.labName,
        CAP: props.grnInfo.cap,
        AOZ: props.grnInfo.amoz,
        AMOZ: props.grnInfo.amoz,
        AHD: props.grnInfo.ahd,
        SEM: props.grnInfo.sem,
        capDetails: props.grnInfo.capValue,
        aozDetails: props.grnInfo.aozValue,
        amozDetails: props.grnInfo.amozValue,
        ahdDetails: props.grnInfo.ahdValue,
        semDetails: props.grnInfo.semValue,
        grnItemId: props.grnInfo.grnItemId ,
        grnId: props.grnInfo.grnId ,
        // indentId: props.type === 'PRE HARVEST' ? props.grnInfo.indentId : null,
        // indentItemId: props.type === 'PRE HARVEST' ? props.grnInfo.indentItemId : null,
      });
        setCapState(props.grnInfo.cap);
        setOazState(props.grnInfo.aoz);
        setAmozState(props.grnInfo.amoz);
        setAhdState(props.grnInfo.ahd);
        setSemState(props.grnInfo.sem);
      }
    }, [props.grnInfo]);
  


  // useEffect(() => {
  //   // If any field is FAIL, set overall result to FAIL
  //   if ([capState, oazState, amozState, ahdState, semState].includes(PassOrFail.FAIL)) {
  //     setOverallResult(PassOrFail.FAIL);
  //   } 
  //   // If all fields are PASS, set overall result to PASS
  //   else if ([capState, oazState, amozState, ahdState, semState].every((state) => state === PassOrFail.PASS)) {
  //     setOverallResult(PassOrFail.PASS);
  //   } 
  //   if(overallResult.includes(PassOrFail.FAIL)){

  //     testingInfo.setFieldsValue({overall:PassOrFail.FAIL})
  //   }else if{
  //     testingInfo.setFieldsValue({overall:PassOrFail.PASS})

  //   }
  //   // Otherwise, keep it Pending (if not all fields are selected)
  //   else {
  //     setOverallResult(null);
  //   }
  // }, [capState, oazState, amozState, ahdState, semState]);



  // useEffect(() => {
  //   const states = [capState, oazState, amozState, ahdState, semState];
  
  //   // Check if all 5 test states are available
  //   if (states.some(state => state === null || state === undefined)) {
  //     // If any state is null or undefined, keep the overall result as null
  //     setOverallResult(null);
  //     testingInfo.setFieldsValue({ overall: null });
  //   } else {
  //     // All states are filled, check for Pass or Fail
  //     if (states.includes(PassOrFail.FAIL)) {
  //       setOverallResult(PassOrFail.FAIL);
  //       testingInfo.setFieldsValue({ overall: PassOrFail.FAIL });
  //     } else {
  //       setOverallResult(PassOrFail.PASS);
  //       testingInfo.setFieldsValue({ overall: PassOrFail.PASS });
  //     }
  //   }
  // }, [capState, oazState, amozState, ahdState, semState]);


  const handleStateChange = (setter) => (value) => {
    
    setter(value);
   
  };

  const handleCancel = () => {
    console.log('vgdgbnm,')
    props.setIsModalVisible(false);

    props.setSelectedRecord(null);
  };
 

  const getAllEmployees = () =>{
    hrmsService.getAllActiveEmployees().then(res=>{
      if(res.status){
        setEmployees(res.data)
      }else{
        setEmployees([])
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setEmployees([]);
    });
  }




  const getGrnInfoByItemId = () => {
    console.log('nnnnnn', props.grnInfo);

      rmGrnService.getGrnInfoByItemId({ grnItemId: props.grnInfo.grnItemId })
        .then(res => {
          if (res.status) {
            setRmInfo(res.data);
            const productReq = new ProductRequest(res.data?.productId);
            
            productService.getActiveProductById(productReq).then(productRes => {
              if (productRes.status) {
                setProductData(productRes.data);
                testingInfo.setFieldsValue({
                  productId: productRes.data?.productId,
                  plantId: res.data?.plantId, // Using res.data directly
                  productCode: productRes.data?.productCode,
                  variety: productRes.data?.productName,
                });
              } else {
                AlertMessages.getErrorMessage("Product data is not retrieved: " + productRes.internalMessage);
              }
            });
          } else {
            AlertMessages.getErrorMessage(res.internalMessage);
          }
        })
        .catch(err => {
          AlertMessages.getErrorMessage(err.message);
        });
    
    unitService.getAllPlants()
      .then(res => {
        if (res.status) {
          setPlantData(res.data);
        } else {
          setPlantData([]);
        }
      })
      .catch(err => {
        AlertMessages.getErrorMessage(err.message);
        setPlantData([]);
      });
  }
  
  
  const saveInfo = () => {
    testingInfo.validateFields().then(info => {
        // Debug logs before assignment
        console.log("DEBUG: props.grnInfo =", props.grnInfo);
        console.log("DEBUG: props.grnInfo.qcAt =", props.grnInfo.qcAt);
        console.log("DEBUG: props.type =", props.type);
        console.log("DEBUG: props.grnInfo.indentId =", props.grnInfo.indentId);
        console.log("DEBUG: props.grnInfo.indentItemId =", props.grnInfo.indentItemId);

        info.plantId = Number(localStorage.getItem('unit_id'));
        info.createdUser = localStorage.getItem('createdUser');
        info.updatedUser = localStorage.getItem('createdUser');
        info.qcAt = props.type;
        info.lotNumber = props.type === 'GRADING' 
            ? (props.grnInfo.lotNumber ? props.grnInfo.lotNumber : '') 
            : null;

        // Updated assignments for indentId and indentItemId
        // info.indentId = 
        //     props.grnInfo && props.type?.trim().toUpperCase() === 'PRE HARVEST' && props.grnInfo.indentId !== undefined
        //         ? props.grnInfo.indentId
        //         : null;
        info.indentId = 
            props.grnInfo.indentId
                ? props.grnInfo.indentId
                : null;

        info.indentItemId = 
            props.grnInfo && props.type?.trim().toUpperCase() === 'PRE HARVEST' && props.grnInfo.indentItemId !== undefined
                ? props.grnInfo.indentItemId
                : null;

        info.AOZ = oazState;
        info.CAP = capState;
        info.AHD = ahdState;
        info.AMOZ = amozState;
        info.SEM = semState;

        info.count = props.grnInfo.count;
        info.noOfBoxes = props.grnInfo.boxes;
        info.labName = info.labName;
        info.capDetails = info.capDetails;
        info.aozDetails = info.aozDetails;
        info.amozDetails = info.amozDetails;
        info.ahdDetails = info.ahdDetails;
        info.semDetails = info.semDetails;

        // Debug log before API call
        console.log(info.indentId, 'Indent ID before API call');
        console.log(info.indentItemId, 'Indent Item ID before API call');
        console.log(info, 'Final Info Object before sending');

        antiMicroTInfoService.createAntibioticsInfo(info).then(res => {
            if (res.status) {
                console.log('API Response:', res);
                props.setRefreshKey(prev => prev + 1);
                props.handleCancel();
                AlertMessages.getSuccessMessage(res.internalMessage);
            } else {
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        }).catch(err => {
            AlertMessages.getErrorMessage(err.message);
        });
    });
};




  const limitValidator = () => {
    if(testingInfo.getFieldValue('CAP') > testingInfo.getFieldValue('CAPL')){
      AlertMessages.getWarningMessage('CAP value should not exceed CAP Limit')
    }
    else if(testingInfo.getFieldValue('AOZ') > testingInfo.getFieldValue('AOZL')){
      AlertMessages.getWarningMessage('AOZ value should not exceed APZL Limit')
     }
    else if(testingInfo.getFieldValue('AMOZL') > testingInfo.getFieldValue('AMOZL')){
      AlertMessages.getWarningMessage('AMOZ value should not exceed AMOZL Limit')

  }
}
  return (
    <Modal 
        visible={props.isModalVisible}
        onCancel={handleCancel}
        footer={null}
        width="80vw" 
        style={{ top: 30, height: '100vh' }} 
        bodyStyle={{ height: '100%', overflow: 'auto' }} 
        centered
      > 
    <Card size="small" title={<span style={{ color: 'white' }} > AntiBiotic Test Information</span>}
      style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>

      <Form
        layout="vertical"
        form={testingInfo}
        
      >
        <Row gutter={24}>
          <Form.Item name={'infoId'} style={{ display: "none" }}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'grnId'} initialValue={props.grnInfo.grnId}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'grnItemId'} initialValue={props.grnInfo.grnItemId}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'productId'}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'productCode'}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'plantId'}>
            <Input hidden />
          </Form.Item>
          <Form.Item name={'qcAt'}  initialValue={props.type}> 
            <Input hidden />
          </Form.Item>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Descriptions>
              <Descriptions.Item label="Product">
                {productData?.productName}
              </Descriptions.Item>
            </Descriptions>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
          <Descriptions>
              <Descriptions.Item label={props.grnInfo.supplierType ? `${props.grnInfo.supplierType} Name`:"Farmer Name" }>
              {props.grnInfo.supplierType === "Dealer" ? props.grnInfo.dealerName || "-" : props.grnInfo.farmerName || "-"}              
              </Descriptions.Item>
            </Descriptions>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
          <Descriptions>
              <Descriptions.Item label="Suppiler Type">
                {props.grnInfo.supplierType?props.grnInfo.supplierType:' '}
              </Descriptions.Item>
            </Descriptions>
          </Col>
          {props.type === 'PRE HARVEST' && (
          <><Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
              <Descriptions>
                <Descriptions.Item label="Indent Code">
                  {props.grnInfo.indentNumber ? props.grnInfo.indentNumber : ' '}
                </Descriptions.Item>
              </Descriptions>
            </Col>
            {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5}} lg={{ span: 5}} xl={{ span: 5}}>
                <Descriptions>
                  <Descriptions.Item label="Indent Date">
                    {props.grnInfo.indentDate ? moment(props.grnInfo.indentDate).format("DD-MM-YYYY") : ' '}
                  </Descriptions.Item>
                </Descriptions>
              </Col> */}
              </>)}
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
              <Descriptions>
                <Descriptions.Item label="GRN Number">
                  {props.grnInfo.grnNumber ? props.grnInfo.grnNumber : ' '}
                </Descriptions.Item>
              </Descriptions>
            </Col>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                <Descriptions>
                  <Descriptions.Item label="GRN Date">
                    {props.grnInfo.grnDate ? moment(props.grnInfo.grnDate).format("DD-MM-YYYY") : ' '}
                  </Descriptions.Item>
                </Descriptions>
              </Col>
          {props.type === 'GRADING' && (
          <><Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 5 }} xl={{ span: 5 }}>
                <Descriptions>
                  <Descriptions.Item label="LOT Code">
                    {props.grnInfo.lotNumber ? props.grnInfo.lotNumber : ' '}
                  </Descriptions.Item>
                </Descriptions>
              </Col></>)}
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Descriptions>
              <Descriptions.Item label="Variety">
                {rmInfo?.varietyOfMaterial}
              </Descriptions.Item>
            </Descriptions>
          </Col> */}

          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
          <Descriptions>
              <Descriptions.Item label="Lot Number">
                {props.grnInfo.lotNumber?props.grnInfo.lotNumber:' '}
              </Descriptions.Item>
            </Descriptions>
          </Col> */}

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
          <Descriptions>
              <Descriptions.Item label="Count">
                {props.grnInfo.count?props.grnInfo.count:' '}
              </Descriptions.Item>
            </Descriptions>
          </Col>
{/* 
          {props.type === 'GRADING' && ( */}
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Descriptions>
              <Descriptions.Item label="Number of boxes">
                {props.grnInfo.boxes ? props.grnInfo.boxes : ' '}
              </Descriptions.Item>
            </Descriptions>
          </Col>
          {/* )} */}

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
          <Descriptions>
              <Descriptions.Item label="Quantity">
                {props.grnInfo.grnQuantity?props.grnInfo.grnQuantity:' '}
              </Descriptions.Item>
            </Descriptions>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
          <Form.Item
  name="location"
  label="Location"
 
>
  <Input style={{ width: '100%' }} placeholder="Enter Location" />
</Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>


          <Form.Item 
  label="Alloted Lab" 
  name="allotedLab" 
  rules={[{ required: true, message: "Please select an Alloted Lab" }]}
>
  <Select 
    placeholder="Select Alloted Lab" 
    allowClear
  >
    <Option value={AllocatedLab.EXTERNAL}>EXTERNAL</Option>
    <Option value={AllocatedLab.INHOUSE}>INHOUSE</Option>
  </Select>
</Form.Item>
      </Col>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item label="Lab Name" name={'labName'} rules={[
                    {
                      required: true,
                      message: `Lab Name is required`,
                    },
                  ]}>
                    <Input style={{ width: '100%' }} placeholder="Enter Lab Name"/>
                  </Form.Item>
            
            </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item label="Sampler Name" name={'samplerName'} rules={[
              {
                required: true,
                message: `samplerName is required`,
              },
            ]}>
              <Select
               showSearch
               optionFilterProp="children"
               filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
                placeholder="Select samplerName"
              >
                <Option key={'plant'} value={''}>Select sampler Name</Option>
                {employees.map(hrms => {
                  return <Option key={hrms.employeeId} value={hrms.employeeName}>{hrms.employeeName}</Option>
                })}
              </Select>
            </Form.Item>
          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item
              name={"sampleDetails"}
              label="Sample Details"
              rules={[
                {
                  required: true,
                  message: `Missing Sample Details`,
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col> */}
<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
  <Form.Item
    name={"currentDate"}
    initialValue={moment()}
    label="Date Of Sampling"
    rules={[
      {
        required: true,
        message: `Missing sampling Date`,
      },
    ]}
  >
    <DatePicker
      disabledDate={(current) => current && current.isAfter(moment())} // Prevent future dates
      // showTime={{ format: "HH:mm" }}
      style={{ width: '100%' }}
      format="YYYY-MM-DD"
      showToday={true}
      defaultValue={moment()} // Set the default value to the current date and time
    />
  </Form.Item>
</Col>

       
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
          <Form.Item label="CAP" name='cap'
           rules={[
            {
              required: props.isUpdating,
              message: `Missing cap `,
            },
          ]}
            >
        <Select
          value={capState}
          onChange={handleStateChange(setCapState)}
          placeholder="Select CAP state"
        >
          <Option value={PassOrFail.PASS}>PASS </Option>
          <Option value={PassOrFail.FAIL}>FAIL</Option>
        </Select>
        {capState === "FAIL" && (
          <Form.Item name ='capDetails' label="CAP Details"
          rules={[
            {
              required: capState === "FAIL" ?true:false,
              message: `Missing capDetails`,
            },
          ]}
        >
            <Input placeholder="Enter CAP details" />
          </Form.Item>
        )}
      </Form.Item>
        </Col>

        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>


      <Form.Item label="AOZ" name ='AOZ' 
       rules={[
        {
          required: props.isUpdating,
          message: `Missing AOZ `,
        },
      ]}

     >
        <Select
          value={oazState}
          onChange={handleStateChange(setOazState)}
          placeholder="Select OAZ state"
        >
          <Option value={PassOrFail.PASS} key={PassOrFail.PASS}>PASS</Option>
          <Option value={PassOrFail.FAIL} key={PassOrFail.FAIL}>FAIL</Option>
        </Select>
        {oazState === "FAIL" && (
          <Form.Item name ='aozDetails' label="AOZ Details"
          rules={[
            {
              required: oazState === "FAIL"?true:false,
              message: `Missing AOZ Details `,
            },
          ]}
         >
            <Input placeholder="Enter AOZ details" />
          </Form.Item>
        )}
      </Form.Item>
      </Col>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>


      <Form.Item label="AMOZ" name ='AMOZ' 
      rules={[
        {
          required: props.isUpdating,
          message: `Missing AMOZ Details `,
        },
      ]}
    >
        <Select
          value={amozState}
          onChange={handleStateChange(setAmozState)}
          placeholder="Select AMOZ state"
        >
          <Option value={PassOrFail.PASS}>PASS</Option>
          <Option value={PassOrFail.FAIL}>FAIL</Option>
        </Select>
        {amozState === "FAIL" && (
          <Form.Item name="amozDetails" label="AMOZ Details"
          rules={[
            {
              required: amozState === "FAIL"?true:false,
              message: `Missing AMOZ Details `,
            },
          ]}
         >
            <Input placeholder="Enter AMOZ details" />
          </Form.Item>
        )}
      </Form.Item>
      </Col>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
      <Form.Item label="AHD" name='AHD'
      rules={[
        {
          required: props.isUpdating,
          message: `Missing AHD `,
        },
      ]}
    >
        <Select
          value={ahdState}
          onChange={handleStateChange(setAhdState)}
          placeholder="Select AHD state"
        >
          <Option value={PassOrFail.PASS}>PASS</Option>
          <Option value={PassOrFail.FAIL}>FAIL</Option>
        </Select>
        {ahdState === "FAIL" && (
          <Form.Item name = 'ahdDetails' label="AHD Details"
          rules={[
            {
              required: ahdState === "FAIL"?true:false,
              message: `Missing AHD Details `,
            },
          ]}
         >
            <Input placeholder="Enter AHD details" />
          </Form.Item>
        )}
      </Form.Item>
      </Col>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>

      <Form.Item label="SEM" name='SEM'
      rules={[
        {
          required: props.isUpdating,
          message: `Missing SEM `,
        },
      ]}
    >
        <Select
          value={semState}
          onChange={handleStateChange(setSemState)}
          placeholder="Select SEM state"
        >
          <Option value={PassOrFail.PASS}>PASS</Option>
          <Option value={PassOrFail.FAIL}>FAIL</Option>
        </Select>
        {semState === "FAIL" && (
          <Form.Item name="semDetails" label="SEM Details"
          rules={[
            {
              required: semState === "FAIL"?true:false,
              message: `Missing SEM Details `,
            },
          ]}
         >
            <Input placeholder="Enter SEM details" />
          </Form.Item>
        )}
      </Form.Item>
      </Col>
      {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}> */}

      {/* <Form.Item label="Overall Test Result" name="overall" >
          <Select
              value={overallResult || undefined}
            
            disabled
            placeholder={overallResult === null ? "Pending" : undefined}
          >
            <Select.Option value={PassOrFail.PASS}>PASS</Select.Option>
            <Select.Option value={PassOrFail.FAIL}>FAIL</Select.Option>
          </Select>
        </Form.Item> */}
        {/* </Col> */}
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
            <Form.Item
              name="remarks"
              label="Remarks"
              rules={[
                {
                  pattern: /^[^-\s][a-zA-Z0-9_\s-]*$/,
                  message: `Don't Allow Spaces`
                }
              ]}
            >
              <TextArea rows={2} />
            </Form.Item>
          </Col>
          </Row>
          <Row gutter={24} >
          <Col>
            <Button type='primary' onClick={saveInfo} block disabled={btnDisable}>
              Submit
            </Button>
          </Col>
        </Row>

      </Form>
    </Card>
    </Modal>
  );
}


export default AntiBioticsMicrobiologyForms;