import React, { useEffect, useState } from 'react';
import {Button, Card, Checkbox, Col, Collapse, DatePicker, Descriptions, Form, Input, Modal, Popconfirm, Radio, Row, Select, Table, Tooltip } from 'antd'
import {SearchOutlined,UndoOutlined,LineOutlined} from '@ant-design/icons'
import {IndentService, RMGrnService} from '@gtpl/shared-services/raw-material-procurement'

import './pages-raw-material-procurement-raw-material-procurement-components-reweighment.css';
import { CompanyCategoryEnum, CountWiseBatchNumberReq, GrnIdReq, RmInvoiceReq } from '@gtpl/shared-models/raw-material-procurement';
import Reweighment from './reweighment';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { CompanyTypeEnum } from '@gtpl/shared-models/masters';
import { HarvestTypes } from '@gtpl/shared-models/common-models';
import { Link } from 'react-router-dom';
import { GrnItemIdRequest } from '@gtpl/shared-models/procurement-management';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { VehicleAssignmentService } from '@gtpl/shared-services/transportation';
import { HrmsEmpDetService } from '@gtpl/shared-services/masters';
import { ColumnProps } from 'antd/lib/table';

const {Option} = Select

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

export const ReweighmentForm = () => {
  const [form] = Form.useForm()
  const [grnNumberInfo,setGrnNumberInfo] = useState<any[]>([])
  const grnService = new RMGrnService()
  const [itemsInfo,setItemsInfo] = useState<any[]>([])
  const [grnItemId,setGrnItemId] = useState<number>()
  const [plantId,setPlantId] = useState<number>()
  const [collapse,SetCollapse] = useState<boolean>(null)
  const rmGrnService = new RMGrnService()
  const userName = JSON.parse(localStorage.getItem('username'))
  const [indentId,setIndentId] = useState<number>()
  const [billToDisable,setBillToDisable] = useState<boolean>(false)
  const [billTo,setBillTo] = useState<CompanyTypeEnum>()
  const [radioButDisable,setRadioButDisable] = useState<boolean>(false)
  const [indentItemId,setIndentItemId] = useState<number>()
  const [batchNumber,setBatchNumber] = useState<string>()
  const [refNoInfo,setRefNoInfo] = useState<any[]>([])
  const [referenceNum,setReferenceNum] = useState<number>()
  const [selectedGrn,setSelectedGrn] = useState<any>()
  const [vehicleNumber,setVehicleNumber] = useState<string>('')
  const saleService = new SaleOrderService()
  const vehicleService = new VehicleAssignmentService()
  const [vehicles,setVehicles] = useState([])
  const empService = new HrmsEmpDetService();
  const [employeeNames, setEmployeeNames] = useState<any[]>([]);
  const [sealNumber,setSealNumber]=useState<string>('')
  const [reweighmentDate,setreweighmentDate]=useState<any>()
  const [supervisor,setSupervisor]=useState<any>()
  const indentService=new IndentService()
  const [page, setPage] = React.useState(1); 
  const [countWiseBatchNum,setCountWiseBatchNum] = useState<any[]>([]) 

  // const [supervisor, setSupervisor] = useState<any | undefined>(undefined);

  useEffect(() => {
    getGrnNumberDrodown()
    getAllSupervisorNames()
  },[])

  const getGrnNumberDrodown = () => {
    grnService.getGrnNumbersDropdownForReweighment().then(res => {
      if(res.status){
        setGrnNumberInfo(res.data)
      }else{
        setGrnNumberInfo([])
      }
    })
  }

  const getAllSupervisorNames = () => {
    rmGrnService.getProcurementEmployeeNames().then(res => {
      console.log(res,"supervisor res")
      if (res.status) {
          setEmployeeNames(res.data)
      } else {
       setEmployeeNames([])
      }
    });
  }

  const getItemsByGrnNumber = () => {
    const req = new RmInvoiceReq(form.getFieldValue('grnId'), null);
  
    grnService.getGrnItemInfoForReweighment(req).then(res => {
      if (res.status) {
        setItemsInfo(res.data);
        setPlantId(res.data[0].plantId);
        setRefNoInfo(res.data1);
        if (res.data[0].reweighmentBillTo !== undefined) {
          if(res.data[0].reweighmentBillTo !== null){
            form.setFieldsValue({ billTo: res.data[0].reweighmentBillTo });
            setBillTo(res.data[0].reweighmentBillTo);
            setBillToDisable(true);
            setBatchNumber(res.data[0].batchNumber);
          }
        }
  
        if (res.data[0].vehicleNumber !== undefined) {
          form.setFieldsValue({ vehicleNumber: res.data[0].vehicleNumber });
        }
  
        vehicleService.getVehicleAssignDetailsByIndentId({ indentId: res.data?.[0]?.indentId }).then(rec => {
          if (rec.status) {
            setVehicles(rec.data?.[0]?.vechileInfo);
  
            if (rec.data[0].vechileInfo.length === 1) {
              form.setFieldsValue({ vehicleNumber: rec.data?.[0]?.vechileInfo?.[0]?.vehicleNum });
              onVehicleNumberChange(rec.data?.[0]?.vechileInfo?.[0]?.vehicleNum);
            }
          } else {
            setVehicles([]);
          }
  
          indentService.getIndentDetailsById({ indentId: res.data?.[0]?.indentId }).then(rec => {
            if (rec.status) {
              const supervisorName = rec.data?.[0]?.lead1Name;
              if (supervisorName) {
                // Set supervisor name in both form and state
                form.setFieldsValue({ supervisor: supervisorName });
                setSupervisor(supervisorName);
              }
            } else {
              setVehicles([]);
            }
          });
        });
      }
    });
  };
  
  console.log(supervisor, "supervisorName");
  

  const onSearch = () => {
    getItemsByGrnNumber()
  }

  const onReset = () => {
    form.resetFields()
    getGrnNumberDrodown()
    setItemsInfo([])
    SetCollapse(null)
    setRadioButDisable(false)
    setBatchNumber(null)
  }

  const HeaderRow = (props:any) => {
    const {batchNumber,indentNumber,invoiceNumber,lotNumber,count,quantity,price} = props.data
    return(
      <div style={{ display: "flex", justifyContent: 'space-evenly', color: 'blue' }}>
        {/* <span>Lot Number: {lotNumber}</span> */}
        <span>Count: {count}</span>
        <span>Quantity: {quantity}</span>
        <span>Price: {price}</span>
      </div>
    )
  }

  const onRemoveCount = (index,grnItemId) => {
    console.log('remove')
    const req = new GrnItemIdRequest(grnItemId)
    grnService.updateReweighmentRemovedCount(req).then(res => {
      if(res.status){
        AlertMessages.getSuccessMessage(res.internalMessage)
        itemsInfo.splice(index,1)
        setItemsInfo([...itemsInfo])
      }else{
        AlertMessages.getErrorMessage(res.internalMessage)
      }
    })
  }

  const onCollapse = (e) => {
    setGrnItemId(e)
  }

  const onRadioButtonChange = (e) => {
    console.log(e.target.value)
    if(e.target.value){
      SetCollapse(true)
    }else{
      SetCollapse(false)
    }
  }

  const onReweighmentConfirm = () => {
    if(form.getFieldValue('billTo') != undefined && form.getFieldValue('reweighmentDate') != undefined && vehicleNumber != null ){
      const req = new GrnIdReq(form.getFieldValue('grnId'),userName,form.getFieldValue('mainBatchNumber'),form.getFieldValue('billTo'),referenceNum,plantId,vehicleNumber,form.getFieldValue('sealNumber'),form.getFieldValue('reweighmentDate'),form.getFieldValue('supervisor'),countWiseBatchNum)
      if(itemsInfo.length == countWiseBatchNum.length){
        rmGrnService.updateReweighmentStatus(req).then(res => {
          if(res.status){
            AlertMessages.getSuccessMessage(res.internalMessage)
            onReset()
          }else{
            AlertMessages.getErrorMessage(res.internalMessage)
          }
        })
      }else{
        AlertMessages.getErrorMessage('Please enter batch number for all counts')
      }
    }else{
      AlertMessages.getErrorMessage('Please fill all required fields!')
    }
  }

  const itemReset = (index) => {
    if(itemsInfo.length == 1){
      onReset()
    }
    else{
      // const index = itemsInfo.findIndex(e =>{
      //   return(e.grnItemId == grnItemId)
      // })
      console.log(index,'---index')
      itemsInfo.splice(index,1)
      setItemsInfo([...itemsInfo])
    }
  }

  const onGrnNumberChange = (val,object) => {
    console.log(object?.info,'---------------')
    setSelectedGrn(object?.info)
    getGrnNumberDrodown()
    setItemsInfo([])
    SetCollapse(null)
    setRadioButDisable(false)
    setIndentId(object?.indentId)
    setIndentItemId(object?.indentItemId)
    // setBatchNumber(object?.batchNumber)
    if(object?.harvestType == HarvestTypes.Re_Weighment){
      form.setFieldsValue({reweighment:true})
      setRadioButDisable(true)
      SetCollapse(true)
    }
  }

  const onBillToChange= (val) => {
    setBillTo(val)
    // const batchCode = val == CompanyTypeEnum.BMR_EXPORTS_AP ? 'E' : val == CompanyTypeEnum.BMR_EXPORTS_ODISHA ? 'OR' : 'R'
    // console.log(refNoInfo,'refnoinfo')
    // const findIndex = refNoInfo.findIndex(e => {
    //   return(e.company = val)
    // })
    // console.log(refNoInfo[findIndex],'===')
    // let refNo = refNoInfo[findIndex].refNumber+1
    // refNo = refNo + ''
    // while (refNo.length < 4) refNo = "0" + refNo;

    // const bactchNo = batchCode + '-' + refNo
    // setBatchNumber(bactchNo)
    // const req = new RmInvoiceReq(form.getFieldValue('grnId'),null,val)
    // grnService.getRefNoInfoAgainstCompany(req).then(res => {
    //   if(res.status){
    //     setReferenceNum(Number(res.data)+1)
    //     const batchNo = batchCode + '-' + Number(res.data)+1
    //     setBatchNumber(batchNo)
    //   }
    // })

  }

  const onBatchNumberChange = (e) => {
    // form.resetFields(['vehicleNumber'])
    setBatchNumber(e.target.value)
    const ref = e.target.value.split('-')[1]
    setReferenceNum(ref)
  }

  const onAddCount = () => {
    // let soId
    // let soItemId
    // saleService.getDummySo().then(res => {
    //   console.log(res)
    //   if(res.status){
    //     console.log(res.data)
    //       soId = res.data.saleOrderId
    //       soItemId = res.data.soItemId
    //   }
    // })
    // console.log(soId,soItemId)
    setItemsInfo([...itemsInfo,{grnDate:itemsInfo[0].grnDate,grnId:itemsInfo[0].grnId,indentId:itemsInfo[0].indentId,indentNumber:itemsInfo[0].indentNumber,plantId:itemsInfo[0].plantId,grnItemId:null,count:null,quantity:null,price:null,saleOrderId:itemsInfo[0].saleOrderId,saleOrderItemId:itemsInfo[0].saleOrderItemId}])
  }


  const onVehicleNumberChange = (e) => {
    console.log(e);
    const formattedValue = Array.isArray(e)
    ? e.join(',')
    : e;

    setVehicleNumber(formattedValue)
  }

  const onSealNumberChange = (e) => {
    const sealNumberValue = e.target.value;
    setSealNumber(sealNumberValue); 
}

  const onReweighmentDateChange = (e) => {
    console.log(e);
    const reweighmentDate = Array.isArray(e)
    ? e.join(',')
    : e;

    setreweighmentDate(reweighmentDate)
  }

  const onSuperviosrChange = (e) => {
    const supervisorValue = Array.isArray(e)
    ? e.join(',')
    : e;

    setSupervisor(supervisorValue)
  }

  const onAddBatchNumber = (e,record,index) => {
    console.log('************')
    console.log(e.target.value)
    if(e.target.value != undefined || e.target.value != null || e.target.value != ' '){
      console.log('999999')
      const info = new CountWiseBatchNumberReq(record.count,e.target.value,record.antibioticTestResult,record.grnItemId)
      countWiseBatchNum[index] = info
      setCountWiseBatchNum([...countWiseBatchNum])
    }
  }

  const tableColumns : ColumnProps<any>[] = [
    // {
    //   title: 'S No',
    //   key: 'id',
    //   width: '70px',
    //   responsive: ['md'],
    //   align: 'left',
    //   render: (text, object, index) => (page-1) * 10 +(index+1)
    // },
    {
      title:'Count',
      dataIndex:'count',
      width:'460px',
      align:'center',
      render:(text,record) => {
        return(
          <>{Number(text)}</>
        )
      }
    },
    {
      title:'Batch Number',
      dataIndex:'batchNumber',
      align:'center',
      render:(text,record,index) => {
        return(
          <>{<Input onBlur={(e) => {onAddBatchNumber(e,record,index)}}/>}</>
        )
      }
    }
  ]
  


  return (
    <Card title={<span style={{ color: 'white' }}>Reweighment</span>}
    style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    extra={
      <Link to="/reweighment-view">
        <Button className="panel_button">View </Button>
      </Link>
    }  >
         <Form form={form} layout='vertical'>
      <Row gutter={24}>
      <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 10 }}>
        <Form.Item label='Grn Number' name='grnId'>
          <Select showSearch allowClear optionFilterProp='children' placeholder='Select Grn Number' onChange={onGrnNumberChange}>
            {grnNumberInfo.map(e => {
              return(
                <Option key={e.grnId} value={e.grnId} indentId={e.indentId} harvestType={e.harvestType} indentItemId={e.indentItemId} batchNumber={e.batchNumber} info={e}>{e.grnNumber}-{e.supplierName}-{e.count}</Option>
              )
            })}
          </Select>
        </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 3 }} style={{marginTop:'2%'}}>
          <Form.Item>
            <Button type='primary' icon={<SearchOutlined/>} onClick={onSearch}>Search</Button>
          </Form.Item>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 2 }} style={{marginTop:'2%'}}>
          <Form.Item>
            <Button danger icon={<UndoOutlined/>} onClick={onReset}>Reset</Button>
          </Form.Item>
        </Col>
      </Row>
        {
          itemsInfo.length > 0 ? ( 
            <>
            <Row gutter={24}>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
            <Form.Item label='Is Reweighment Required' name='reweighment'>
              <Radio.Group onChange={onRadioButtonChange} disabled={radioButDisable}>
                <Radio value={true}>Yes</Radio>
                {/* <Popconfirm title='Reweighment' onConfirm={onReweighmentConfirm}> */}
                <Radio value={false}>No</Radio>

                {/* </Popconfirm> */}
                </Radio.Group>
          
            </Form.Item>
           </Col>
          {
            !collapse ? (
                <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item name='billTo' label='Bill To' rules={[{required:true,message:'Bill To is required'}]}>
              <Select showSearch allowClear optionFilterProp='children' placeholder='Select Bill To' disabled={billToDisable} onChange={onBillToChange} dropdownMatchSelectWidth={false}>
                {Object.values(CompanyTypeEnum).map(e => {
                  return(
                    <Option key={e} value={e}>{e}</Option>
                  )
                })}
              </Select>
            </Form.Item>
            </Col>
            ) : (<></>)
          }
         
            {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 5 }}>
            <Form.Item name='vehicleNumber' label='Vehicle Number' rules={[{required:true,message:'Vehicle Number is required'}]}>
             <Input placeholder='Enter Vehicle Number' onBlur={onVehicleNumberChange}/>
            </Form.Item>
            </Col> */}
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 5 }}>
            {itemsInfo?.[0]?.isVehicleRequired?(
            <Form.Item name='vehicleNumber' label='Vehicle Number' rules={[{required:true,message:'Vehicle Number is required'}]}>
             <Select
                placeholder="Select Vehicle"
                allowClear
                 mode="multiple"
                onChange={(e)=>onVehicleNumberChange(e)}
            >
                {vehicles.map(dropData => {
                    return <Option value={dropData.vehicleNum}>{dropData.vehicleNum}</Option>
                })}
            </Select>
             {/* <Input placeholder='Enter Vehicle Number' onBlur={onVehicleNumberChange}/> */}
            </Form.Item>
            ):(
              <Form.Item name='vehicleNumber' label='Vehicle Number' rules={[{required:true,message:'Vehicle Number is required'}]}>
             <Input placeholder='Enter Vehicle Number' onBlur={(e)=>onVehicleNumberChange(e.target.value)}/>
            </Form.Item>
            )}
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
            <Form.Item name="sealNumber" label="Seal Number">
            <Input placeholder='Enter Seal Number'  onChange={(e)=>onSealNumberChange(e)}
            />
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }}>
            <Form.Item name="reweighmentDate" label="Reweighment Date" rules={[{required:true,message:'Reweighment Date is required'}]}>
            <DatePicker  onChange={(e)=>onReweighmentDateChange(e)} style={{width:'100%'}}
            />
            </Form.Item>
            </Col>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item name="supervisor" label="Supervisor">
            <Select
              placeholder="Select Supervisor"
              onChange={(e) => onSuperviosrChange(e)}
              dropdownMatchSelectWidth={false}
              // value={supervisor} 
            >
            {employeeNames.map((emp) => {
                  return <Option value={emp.employeeId}>{emp.fullName}</Option>
                })}
            </Select>
            </Form.Item>
            </Col>
            {
              itemsInfo.length > 0 && collapse ? (<>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 6 }} style={{marginTop:'2.5%',marginLeft:'10%'}}>
               <Descriptions>
                  {/* <Descriptions.Item label='Batch Number'>{batchNumber}</Descriptions.Item> */}
                  <Descriptions.Item label={<b>Indent Number</b>}>{<b>{itemsInfo[0].indentNumber}</b>}</Descriptions.Item>
                  {/* <Descriptions.Item label='Invoice Number'>{itemsInfo[0].invoiceNumber ? itemsInfo[0].invoiceNumber : '-'}</Descriptions.Item> */}
                </Descriptions>
                </Col>
              </>) : (<></>)
            }
            {collapse ? (<>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 2 }} style={{marginLeft:'30%',marginTop:'2.5%'}}>
              <Form.Item>
                <Button onClick={onAddCount} style={{backgroundColor:'green',color:'white'}} size='small'>Add Count</Button>
              </Form.Item>
            </Col>
            </>) : (<></>)}
            {collapse == false ? (<>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 5 }}>
                <Form.Item name='mainBatchNumber' label='Batch Number' 
                // rules={[{required:true,message:'Main Batch Number is required'}]}
                >
                <Input onChange={onBatchNumberChange} placeholder='Enter Main Batch Number'/>
                </Form.Item>
              </Col>
            </>) : (<></>)}
            </Row>
            {
              collapse == false? (<>
              {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 4 }} style={{marginLeft:'1%'}}>
                <Descriptions>
                  <Descriptions.Item label='Batch Number'>{batchNumber}</Descriptions.Item>
                </Descriptions>
              </Col> */}
           
              <Row gutter={24}>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 24 }}>
                <Table columns={tableColumns} dataSource={itemsInfo} pagination={false}/>
              </Col>
              </Row>
              <Row justify='end'>
                <Form.Item>
                  <Button onClick={onReweighmentConfirm} type='primary'>Submit</Button>
                </Form.Item>
              </Row>
              {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5 }} lg={{ span: 6 }} xl={{ span: 2 }}>
              </Col> */}
              </>) : (<></>)
            }
          </>
          ) : (<></>)
        }
       
    </Form>

    {itemsInfo.length > 0 && collapse? (<>
   
      <Collapse expandIcon={() => null} onChange={onCollapse} collapsible={collapse ? 'header' : 'disabled'} accordion>
      {itemsInfo.map((e,index) => (
        <Collapse.Panel header={<HeaderRow data={e}/>} key={`${e.grnItemId}-${index}`} extra={selectedGrn.harvestType == HarvestTypes.Re_Weighment && e.count != null ? <Tooltip title='Remove Count'><LineOutlined onClick={() => onRemoveCount(index,e.grnItemId)}/></Tooltip> : ''}>
          <Reweighment grnId={form.getFieldValue('grnId')} grnItemId={e.grnItemId} reset={() => itemReset(index)} plantId={plantId} index={index} grnInfo={selectedGrn} vehicleNumber={vehicleNumber} saleOrderId={e.saleOrderId} saleOrderItemId={e.saleOrderItemId} sealNumber={sealNumber} reweighmentDate={reweighmentDate} supervisor={supervisor} antibioticTestResult={e.antibioticTestResult}/>
        </Collapse.Panel>
      ))}
    </Collapse>
    </>) : (<></>)}  
    </Card>
  );
}

export default ReweighmentForm;