import { Form, Input, Button, Space, Card, Select, Col, Row, Layout, Table, Empty, InputNumber, Tooltip, Divider, Descriptions, Typography, Drawer, Modal } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { RMGrnService } from '@gtpl/shared-services/raw-material-procurement';
import { GrnData, GrnDetails, RmGrnItemDetails, RmGrnPlantDetails } from '@gtpl/shared-models/raw-material-procurement';
import { RawMaterialGrnForm } from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/raw-material-grn-form';
import { RmVehicleInspection } from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/rm-vehicle-inspection';
import { RmEvaluation } from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/rm-evaluation';
import { RmEvaluationPrint } from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/rm-evaluation--print';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Link, useLocation } from 'react-router-dom'
import moment from 'moment';
import { Header, Content, Footer } from 'antd/lib/layout/layout';
import { ColumnProps } from 'antd/lib/table';
import { GrnIdRequest } from '@gtpl/shared-models/procurement-management';
const { Text } = Typography;
import { UnitcodeService } from '@gtpl/shared-services/masters';
// import './raw-material-grn-detail-view.css';
import { PlantsEnum, SupplierTypeEnum } from '@gtpl/shared-models/common-models';
import { PlantsDropDown } from '@gtpl/shared-models/masters';
import { CheckCircleOutlined,FormOutlined, SnippetsOutlined,CloseCircleOutlined, RightSquareOutlined, EyeOutlined, EditOutlined, SearchOutlined, CloseSquareOutlined, SnippetsFilled, PrinterOutlined, ReconciliationOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import { RMGrnPrint } from '@gtpl/pages/logistics/logistics-components/documents';


import { AntiBioticsMicrobiologyForm } from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/anti-biotics-microbiology-form'
import GrnIndent from '../../../../../raw-material-procurement/raw-material-procurement-components/raw-material-grn-detail-view/src/lib/grn-audit';
import { LeavesDTO } from 'libs/shared-models/hrms/src/lib/employee-leaves/leaves.dto';
import {ReweighmentInfoView} from '@gtpl/pages/raw-material-procurement/raw-material-procurement-components/reweighment'
import AntiBioticsMicrobiologyForms from './antibiotics-evoulation-form';
import { LotNoReq } from '@gtpl/shared-models/production-management';
import { ProdlogService } from '@gtpl/shared-services/production';


/* eslint-disable-next-line */
export interface RawMaterialGrnDetailViewProps { }

export function AntibioticsForm(props: RawMaterialGrnDetailViewProps) {
  const [page, setPage] = React.useState(1);
  const [defaultFormData, setDefaultFormData] = useState(undefined);
  const [grnDetailViewdata, setGrnDetailViewdata] = useState<GrnData>(null);
  const [productsBtnDisable, setProductsBtnDisable] = useState<boolean>(false);
  const [updateBtnDisable, setUpdateBtnDisable] = useState<boolean>(false);
  const [rmAssigned, setRmAssigned] = useState<boolean>(false);
  const [allGrnData, setAllGrnData] = useState<any[]>([]);
  const [ grnNumbers,setGrnNumbersData] = useState<any[]>([])
  const [ lotNumbers,setLotNumbersData] = useState<any[]>([])
  const [lotdata,setLotData] = useState<any[]>([])


  const [factoriesData, setFactoriesData] = useState<PlantsDropDown[]>([]);
  const [subFactoriesData, setSubFactoriesData] = useState<PlantsDropDown[]>([]);
  const [selectedGrn, setSelectedGrn] = useState<any>(undefined);
  const [indexVal, setIndexVal] = useState(0);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const service = new RMGrnService;
  const [form] = Form.useForm();
  const [grnform] = Form.useForm();
  const unitcodeService = new UnitcodeService();
  const { Option } = Select;
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [isModalVisible2, setIsModalVisible2] = useState<boolean>(false);
  const [selectedInformation, setSelectedInformation] = useState<GrnData>();
  const [modelType, setModelType] = useState<string>('');
  const [formType, setFormType] = useState(null);

  const [grnItemId, setGrnItemId]=useState<number>(null)
  const [openModel, setOpenModel] = useState<boolean>(false);

  //const [data, setdata] = useState<GrnItemsInfo[]>([])
  let location = useLocation();
  const grnId = location.state;
  const userName = localStorage.getItem("createdUser");
  const [lotNumber, setLotNumber] = useState<any[]>([]);
  const services = new ProdlogService();




  //  let grnIdReq=  new GrnIdRequest(props.GrnDetails.grnId);

  const setEditForm = (rowData: any, index) => {
    setDefaultFormData(rowData);
    setIndexVal(index);
  }

  useEffect(() => {
    getAllMainPlants();
    getAllSubPlants();
    getAllGrnNUmbers();
    getAllLotCodesForGrading()
    fetchLotNumbers()
    if (grnId) {
      getGrnDataById(grnId)
    }
  }, []);
  console
  .log(GrnData)
  useEffect(() => {
    if (allGrnData) {
      grnform.setFieldsValue({ plantId: allGrnData[0]?.plantId })
      grnform.setFieldsValue({ subPlantId: allGrnData[0]?.subPlantId })
      console.log(allGrnData)
      let rmReceiveFlag = false
      for(const record of allGrnData){
        if(record.assignToRm == 1){
          rmReceiveFlag = true
          console.log('yessss')
          setRmAssigned(true)
          break
        }else{
          rmReceiveFlag = false
        }
      }
    }
  }, [allGrnData])

  useEffect(()=> {
    if(rmAssigned){
      console.log(rmAssigned)
    }
  },[rmAssigned])

  const getAllSubPlants = () => {
    unitcodeService.getAllSubPlants().then((res) => {
      if (res.status) {
        setSubFactoriesData(res.data)
      }
      else {
        if (res.intlCode) {
          setSubFactoriesData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
  }
  const getCssFromComponent = (fromDoc, toDoc) => {
    Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => {
      if (styleSheet.cssRules) { // true for inline styles
        const newStyleElement = toDoc.createElement('style');
        Array.from(styleSheet.cssRules).forEach((cssRule: any) => {
          newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText));
        });
        toDoc.head.appendChild(newStyleElement);
      }
    });
  }


  

  const printOrder = () => {
    const divContents = document.getElementById('printme').innerHTML;
    const element = window.open('', '', 'height=700, width=1024');
    element.document.write(divContents);
    getCssFromComponent(document, element.document);
    element.document.close();
    element.print();
    element.close(); // to close window when click on cancel/Save
    setIsModalVisible(true); // model should be open
  };
  const getRmGrnDataByLotCode = (lotNumber) => {
    console.log(lotNumber,'lotNumberrrrrrrrrrrrrrr');
    
    // service.getGrnDataForId(new GrnIdRequest(grnId)).then(res => {
    service.getRmGrnDataByLotCode(new LotNoReq(lotNumber)).then(res => {
      console.log(res);
      if (res.status) {
        setAllGrnData(res.data)
        // AlertMessages.getSuccessMessage('Success');

      } else {
        if (res.intlCode) {
          setAllGrnData(null)

          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          setAllGrnData(null)

          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  };



  const getGrnDataById = (grnId) => {
    // service.getGrnDataForId(new GrnIdRequest(grnId)).then(res => {
    service.getRmGrnDataByIds(new GrnIdRequest(grnId)).then(res => {
      console.log('grn', grnId)
      console.log(res);
      if (res.status) {
        setAllGrnData(res.data)
        // AlertMessages.getSuccessMessage('Success');
      } else {
        if (res.intlCode) {
          setAllGrnData(null)

          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          setAllGrnData(null)

          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  };

  const getAllMainPlants = () => {
    unitcodeService.getAllMainPlants().then((res) => {
      if (res.status) {
        setFactoriesData(res.data)
      }
      else {
        if (res.intlCode) {
          setFactoriesData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
  }



  const getAllGrnNUmbers = () => {
    service.getAllGrnNUmbers().then((res) => {
      if (res.status) {
        setGrnNumbersData(res.data)
      }
      else {
        if (res.intlCode) {
            setGrnNumbersData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
  }

  const getAllLotCodesForGrading = () => {
    service.getAllLotCodesForGrading().then((res) => {
      if (res.status) {
        setLotNumbersData(res.data)
      }
      else {
        if (res.intlCode) {
          setLotNumbersData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    })
  }

  const fetchLotNumbers = async () => {
    try {
      const res = await services.getLotNumberDetails();
      if (res.status) {
        setLotNumber(res.data);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    } catch (err) {
      AlertMessages.getErrorMessage(err.message);
    }
  };


  const updateGrn = (grnData: any) => {
    console.log('allGrnData:', allGrnData)
    console.log(grnData)
    const dynTableData = [...allGrnData];
    dynTableData[indexVal].count = Number(grnData.count)
    // dynTableData[indexVal].price = Number(grnData.price)
    dynTableData[indexVal].quantity = Number(grnData.quantity)
    dynTableData[indexVal].saleOrderId = grnData.saleOrderId
    dynTableData[indexVal].saleOrderItemId = grnData.saleOrderItemId
    dynTableData[indexVal].softPercentage = Number(grnData.softPercentage)
    dynTableData[indexVal].boxes = Number(grnData.boxes)
    dynTableData[indexVal].receivedBoxes = Number(grnData.receivedBoxes)
    dynTableData[indexVal].fungusPercentage = Number(grnData.fungusPercentage)
    dynTableData[indexVal].looseShell = Number(grnData.looseShell)
    dynTableData[indexVal].remarks = grnData.remarks
    setAllGrnData(dynTableData);
    // dynTableData[indexVal].subPlantId = grnData.price
    let grnItems: RmGrnItemDetails[] = [];
    
    allGrnData.forEach(element => {
      const grnItemObj = new RmGrnItemDetails(element.farmer, element.farmerCode, element.indentId, element.quantity, element.count, element.price, undefined, element.grnItemId, element.farmCode, element.farmerCode, undefined, element.grnId, undefined, element.saleOrderId, element.saleOrderItemId, element.softPercentage, element.boxes, userName, undefined, element.receivedBoxes, undefined, element.indentItemId, element.looseShell, element.fungusPercentage,element.remarks)
      grnItems.push(grnItemObj)
    });
    const grnDetails = new GrnDetails(grnData.grnDate, grnData.indentId, grnData.supplierType, undefined, grnItems,  allGrnData[0]?.plantId, allGrnData[0].grnNumber, allGrnData[0]?.subPlantId, grnData.grnId, userName, undefined, undefined, undefined, undefined, allGrnData[0]?.harvestType)
    console.log(grnDetails)
    service.updateGrn(grnDetails).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated Successfully');
        setDrawerVisible(false);
        getGrnDataById(grnId)
        // getGrnDetails();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const closeDrawer = () => {
    setDrawerVisible(false);
  }

  const openFormWithData = (viewData: GrnData, index: number) => {
    console.log(index)
    viewData.grnDate = moment(viewData.grnDate);
    setDrawerVisible(true);
    setSelectedGrn(viewData);
    setIndexVal(index);

  };

  const assigntoRm = (grnData: any, index: number) => {
    form.validateFields().then(res => {
      grnData.receivedBoxes = form.getFieldValue("receivedBoxes" + index);
      // if(grnData.receivedBoxes > 0){

        console.log(form.getFieldValue("receivedBoxes" + index))
        setProductsBtnDisable(true);
        console.log(grnData);
        service.assignToRM(grnData).then(res => {
          if (res.status) {
            AlertMessages.getSuccessMessage('RM Inserted Successfully');
            getGrnDataById(grnId)
            // setProductsBtnDisable(false);
            // getGrnDetails();
          } else {
            if (res.intlCode) {
              AlertMessages.getErrorMessage(res.internalMessage);
            } else {
              AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        }).catch(err => {
          // setGrnData([]);
          AlertMessages.getErrorMessage(err.message);
          setProductsBtnDisable(false);
        })
      // }else{
      //   AlertMessages.getErrorMessage('boxes should enter')
      // }

    })
  }

  const updateReceivedBoxes = (e, grnId: number, boxes: number,rowData) => {
    console.log(e)
    console.log(Number(boxes))
    if (e > Number(boxes)) {
      AlertMessages.getWarningMessage("Received Boxes exceeded actual Grn Quantity. ");
    }else{
      rowData.receivedBoxes = e
    }
  }

  const handleReweighment = (rowData) => {
    console.log(rowData,'=============')
    setGrnItemId(rowData.grnItemId);
    setOpenModel(true);

  }
  const handleFormTypeChange = (value) => {
    setFormType(value);
  };

 

 


  const columns: ColumnProps<any>[] = [
    {
      title: 'Farmer',
      dataIndex: 'farmerName',
      render: (text, data, index) => {

        return <span>{text}</span>
      }
    },
    {
      title: 'Farm',
      dataIndex: 'farmName',
      render: (text, data, index) => {

        return <span>{text}</span>
      }
    },
    {
      title: 'Product',
      dataIndex: 'productName',
      render: (text, data, index) => {

        return <span>{text}</span>
      }
    },
    {
      title: 'Count',
      dataIndex: 'count',
      render: (text, data, index) => {

        return <span>{Number(text)}</span>
      }
    },
    {
      title: 'Quantity',
      dataIndex: 'quantity',
      render: (text, data, index) => {

        return <span>{Number(text)}</span>
      }
    },
    {
      title: 'No Of Boxes ',
      dataIndex: 'boxes',
      render: (text, data, index) => {
        console.log(data)

        return <span>{text}</span>
      }
    },
    {
      title: 'RM Antibiotics Test',
      dataIndex: 'assignToRm',
      render: (text, rowData: GrnData, index) => (
        <span>{rowData.isAntibioticsTestCompleted ? 'Done' : <SafetyCertificateOutlined
          style={{ color: 'red' }}
          onClick={() => displayModel(rowData, 'antibioticsTest')} />}</span>
      )
    },
  
  ]

  const handleCancel = () => {
    if (grnId) {
      getGrnDataById(grnId)
    }
    setIsModalVisible(false);
  };

  const displayModel = (data: GrnData, type) => {
    setSelectedInformation(data);
    setIsModalVisible(true);
    setModelType(type);
  };

  const onPlantUpdate = (values) => {
    console.log(values)
    console.log(values.plantId)
    console.log(values.subplantId)
    setUpdateBtnDisable(true)
    let subPlantId = 0
    let grnId = allGrnData[0]?.grnId;
    if (values.subPlantId) {
      subPlantId = values.subPlantId;
    }
    service.updatePlantOrSubPlant(new RmGrnPlantDetails(values.plantId, grnId, subPlantId)).then((res) => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Plant/Subplant Updated Successfully');
        setUpdateBtnDisable(false)
        getGrnDataById(grnId)

        // history.push("/rm-grn-grid");
        // onReset();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
          setUpdateBtnDisable(false)

        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
          setUpdateBtnDisable(false)

        }
      }
    })
      .catch((err) => {
        AlertMessages.getErrorMessage(err.message);
      });


  }
  const onSubmit =()=>{
    setIsModalVisible(false);

  }

  return (
    <>
        <Card 
          title={<span style={{ color: 'white' }}>Antibiotics Test  </span>}
          style={{ textAlign: 'center' }}
          headStyle={{ backgroundColor: '#69c0ff', fontSize: '15px' }} size='small'
         extra={
          <Link to="/antibiotics-view">
            <Button className="panel_button">View</Button>
          </Link>
        }    >

<Form>
      <Col xs={24} sm={24} md={6} lg={6} xl={6}>
        <Form.Item name="qcAt" label="TEST AT" rules={[{ required: true, message: 'Please select a Test At' }]}>
          <Select
            placeholder="Select test At"
            onChange={handleFormTypeChange}
            allowClear
          >
            <Option value="PRE HARVEST">PRE HARVEST</Option>
            <Option value="GRADING">GRADING</Option>
          </Select>
        </Form.Item>
      </Col>

      {formType === 'PRE HARVEST' && (
  <Col xs={24} sm={24} md={6} lg={6} xl={6} key="grn">
    <Form.Item name="Grn" label="Indent Number" rules={[{ required: true, message: 'Please select an indent number' }]}>
      <Select
        showSearch
        optionFilterProp="children"
        filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
        placeholder="Select Indent Number"
        onChange={getGrnDataById}
        allowClear
      >
        {grnNumbers
          ? grnNumbers.map((grn) => (
              <Option key={grn.id} value={grn.id}>
                {grn.grnIndentNumber}
              </Option>
            ))
          : null}
      </Select>
    </Form.Item>
  </Col>
)}

{formType === 'GRADING' && (
  <Col xs={24} sm={24} md={6} lg={6} xl={6} key="grading">
    <Form.Item name="LotCode" label="LOT Codes" rules={[{ required: true, message: 'Please select a lot code' }]}>
      <Select
        showSearch
        optionFilterProp="children"
        filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
        placeholder="Select LOT Code"
        onChange={getRmGrnDataByLotCode}
        allowClear
      >
        {lotNumber.map((lot) => (
                  <Option key={lot.lotNumber} value={lot.lotNumber}>
                    {lot.lotNumber}
                  </Option>
                ))}
      </Select>
    </Form.Item>
  </Col>
)}
    
    </Form>

      <Layout style={{ padding: 10, backgroundColor: 'white', border: 10 }}>
          {
            allGrnData ?
              <>
                <Descriptions column={3}>
                {formType === 'GRADING' && (<Descriptions.Item label="GRN Date">
                    {moment(allGrnData[0]?.grnDate).format('DD-MM-YYYY') ? moment(allGrnData[0]?.grnDate).format('DD-MM-YYYY') :"-"}
                  </Descriptions.Item>)}
                  <Descriptions.Item label="Reweighment Date">
                    {allGrnData[0]?.reweighmentDate ? moment(allGrnData[0]?.reweighmentDate).format('DD-MM-YYYY') :"-"}
                  </Descriptions.Item>
                  <Descriptions.Item label="Indent Number">
                    {(allGrnData[0]?.indentCode) ? (allGrnData[0]?.indentCode) :"-"}
                  </Descriptions.Item>
                  {formType === 'GRADING' && (
                  <Descriptions.Item label="GRN Number">
                    {allGrnData[0]?.grnNumber}
                  </Descriptions.Item>)}
                  <Descriptions.Item label="Supplier Type">
                    {allGrnData[0]?.supplierType ? allGrnData[0].supplierType : "-"}
                  </Descriptions.Item>
                  <Descriptions.Item label="Reweightment Bill To">
                    {allGrnData[0]?.reweightBillTo ? allGrnData[0].reweightBillTo : "-"}
                  </Descriptions.Item>
                </Descriptions>

                <br />

                <Form form={form} layout="vertical">
                  <Table key={Date.now()} scroll={{ x: 1000 }} dataSource={allGrnData} columns={(allGrnData[0]?.supplierType != SupplierTypeEnum.DEALER) ? columns.filter(col => (col.dataIndex != 'brokerName')) : columns} pagination={false} /></Form>
                <Drawer bodyStyle={{ paddingBottom: 80 }} title='Update' width={window.innerWidth > 768 ? '65%' : '85%'}
                  onClose={closeDrawer} visible={drawerVisible} closable={true}>
                  <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} size='small'>
                    <RawMaterialGrnForm key={Date.now()}
                      updateItem={updateGrn}
                      isUpdate={true}
                      grnData={selectedGrn}
                      closeForm={closeDrawer}
                      indentId={undefined} />
                  </Card>
                </Drawer>
              </>
              : <></>
          }
        <br></br>
        <Modal
          className='rm-'
          key={'modal' + Date.now()}
          width={'80%'}
          style={{ top: 30, alignContent: 'right' }}
          visible={isModalVisible}
          title={<React.Fragment>
          </React.Fragment>}
          onCancel={handleCancel}
          footer={[

          ]}
        >
          {(modelType == 'rmEvaluation') ? <RmEvaluation grnInfo={selectedInformation} handleCancel={handleCancel} OnClose={onSubmit}/> : ''}
          {(modelType == 'inspection') ? <RmVehicleInspection grnInfo={selectedInformation} handleCancel={handleCancel} /> : ''}
          {/* {(modelType == 'antibioticsTest') ? <AntiBioticsMicrobiologyForms setRefreshKey={} grnInfo={selectedInformation} handleCancel={handleCancel} type={formType} isUpdating={false}/> : ''} */}
          {(modelType == 'print') ? <RMGrnPrint grnItemId={selectedInformation.grnItemId} /> : ''}
          {(modelType == 'evalPrint') ? <RmEvaluationPrint grnItemId={selectedInformation.grnItemId} /> : ''}
          {(modelType == 'audit') ? <GrnIndent itemData={selectedInformation} closeModal={handleCancel}/>:''} 

        </Modal>
        <Modal key='reweighmentInfo' visible={openModel} width={'80%'} footer={[]} onCancel={() => setOpenModel(false)}>
      <ReweighmentInfoView grnId={grnId} grnItemId={grnItemId}  />
      </Modal>
      </Layout>

    </Card>
    </>
  );
}

export default AntibioticsForm;