import { RmReceivingReportReq } from "@gtpl/shared-models/procurement-management"
import { Button, Card, Col, DatePicker, Form, Row, Select, Space } from "antd"
import { GrnService } from "libs/shared-services/procurement/src/lib/grn-service"
import moment from "moment"
import React from "react"
import { useEffect, useState } from "react"
import {FallOutlined, InfoCircleFilled, RiseOutlined, UndoOutlined} from '@ant-design/icons'
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import './pages-reports-reports-components-rm-receiving-report.css';
import 'libs/pages/inquiry-management/inquiry-components/inquiry/src/lib/costing/cost-sheet-format.css'
import html2pdf from 'html2pdf.js';
import { UnitcodeService } from '@gtpl/shared-services/masters';
import { AlertMessages } from "@gtpl/shared-utils/alert-messages"
import { PlantsDropDown } from "@gtpl/shared-models/masters"

export const RmDeflictReport =() =>{
    // useEffect(()=>{
    //     getData()
    // },[])
      const [summaryData, setsummaryData]=useState([])
        const service = new GrnService()
        const [dates, setDates]=useState([])
        const [rmRates, setRmRates]=useState([])
  const [form] = Form.useForm();
      const [isVisible,setIsVisible] = useState(null)
       const [othersCount, setOthersCount]=useState([])
       const [dataLoaded, setDataLoaded] = useState(false);
        const [daysInMonth, setDaysInMonth] = useState<number | null>(null);
         const { Option } = Select;
      const [plantData, setPlantData] = useState<PlantsDropDown[]>([]);
        const unitsService = new UnitcodeService();
        const [unitId, setUnitId] = useState<number>(0);
       
        useEffect(()=>{
          if (Number(localStorage.getItem('unit_id')) != 5) {
            form.setFieldsValue({ unitId: Number(localStorage.getItem('unit_id')) })
            setUnitId(Number(localStorage.getItem('unit_id')))
          }
          getAllPlants()
        },[])
      
        const getAllPlants = () => {
          unitsService.getAllMainPlants().then((res) => {
              if (res.status) {
                  setPlantData(res.data);
              } else {
                  setPlantData([]);
              }
          }).catch(err => {
              AlertMessages.getErrorMessage(err.message);
              setPlantData([]);
          })
      }
      const handleUnit = (value) => {
        setUnitId(value)
      }
      let totalDayReqQty =0
      let totalOpBal =0
      let totalDay1 =null
      let totalDay2 =null
      let totalDay3 =null
      let totalDay4 =null
      let totalDay5 =null
      let totalDay6 =null
      let totalDay7 =null
      let totalDay8 =null
      let totalDay9 =null
      let totalDay10 =null
      let totalDeviation =null
      let totalDeviationPercent =null
    
      let selectedTotal = 0
      let totalQty = 0
      let showDay1 = false 
      let showDay2 = false 
      let showDay3 = false 
      let showDay4 = false;
      let showDay5 = false 
      let showDay6 = false 
      let showDay7 = false 
      let showDay8 = false;
      let showDay9 = false 
      let showDay10 = false;
       const getData = async() =>{
          const date = moment(form.getFieldValue('date')).format('YYYY-MM-DD')
      
          const req = new RmReceivingReportReq(date)
                  req.unitId = unitId

          service.getRmRecievingReportSummary(req).then((res)=>{
            if(res.status){
              setsummaryData(res.data)
              setDates(res.data1)
            }
          })
          const indentDates=[]
          service.getRmRates(indentDates).then((res)=>{
            if(res.status){
              setRmRates(res.data)
            }
          })
        }   
         const othersData = () =>{
            const date = moment(form.getFieldValue('date')).format('YYYY-MM-DD')
        
            const req = new RmReceivingReportReq(date)
        service.getRmRecievingReportOthersSummary(req).then((res)=>{
          if(res.status){
            setOthersCount(res.data)
          }else{
            setOthersCount([])
          }
        })
          }
        const handleRowClick = (count)=>{
            // console.log(count,'countttttttttt');
            
            setIsVisible(isVisible === count? null:count)
            othersData()
          } 
           const onDateChange = (val) => {
              
              if (val) {
                const date = moment(val); // Convert to Moment.js object
                const days = date.daysInMonth();
                setDaysInMonth(days)
              } else {
                setDaysInMonth(0)
              }
              
            };
            const onSearch = () => {
                getData()
              }
              const onReset = () => {
                form.resetFields();
                setsummaryData([]);
                setDates([]);
                setRmRates([]);
               
              }
              const generatePDF = () => {
                  const pdfContent = document.createElement('div');
                  const title = document.createElement('h4');
                  title.textContent = 'RM Deflict Report';
                  title.style.textAlign = 'center';
                  title.style.marginBottom = '10px';
                  pdfContent.appendChild(title);
                  const tableElement = document.getElementById("rm-deflict-table");
                  if (!tableElement) {
                      console.error("Table element not found!");
                      return;
                  }
                  const clonedTable = tableElement.cloneNode(true);
                  pdfContent.appendChild(clonedTable);
              
                  const options = {
                    filename: 'RM Deficit Report.pdf',
                    image: { type: 'jpeg', quality: 0.98 },
                    html2canvas: { scale: 2 },
                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
                  };
                  html2pdf()
                    .from(pdfContent)
                    .set(options)
                    .save()
                          .then(() => {
                          pdfContent.remove();
                      });
                };
    return(<>
    <Card  title={<span style={{color:'white'}}>RAW MATERIAL DEFICIT REPORT</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={summaryData.length == 0 ||(<><ReactHTMLTableToExcel
      id='excel-button'
      // className='download-table-xls-button'
      table='rm-deflict-table'
      filename='RM Deficit Report'
      sheet="Sheet 1"
      buttonText='Get Excel'
     justify='end'
     className="ant-btn ant-btn"
      /><Button
            type="primary"
            onClick={generatePDF}
            style={{ marginLeft: 10 }}
          >
            Download PDF
          </Button></>)}>
      
     <Form form={form} layout="vertical">
                <Row gutter={24}>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                    <Form.Item label='Date' name='date'>
                    <DatePicker style={{width:'100%'}} onChange={(e)=>onDateChange(e)}/>
                    </Form.Item>
                    </Col>
                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                            <Form.Item name="unitId"   label="Unit" rules={[{ required: false,message: 'Missing Unit' }]} >
                                   <Select
                                        showSearch
                                        optionFilterProp="children"
                                        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                        placeholder="Select Unit"
                                        allowClear
                                        style={{ width: '100%' }}
                                        onChange={handleUnit}
                                        disabled={Number(localStorage.getItem('unit_id')) != 5 ? true : false}
                                    >
                                        {plantData.map(dropData => {
                                            return <Option value={dropData.plantId}>{dropData.plantCode}</Option>
                                        })}
                                    </Select>
                                </Form.Item>
                              
                            </Col>
                     <Col span={6} style={{ marginTop: '30px' }}>
                      <Space >
                        <Form.Item>
                          <Button onClick={onSearch} type="primary">Get Report</Button>
                        </Form.Item>
                        <Form.Item>
                          <Button icon={<UndoOutlined />}  onClick={onReset}>Reset</Button>
                        </Form.Item>
                      </Space>
                    </Col>
                </Row>
                
                
            </Form>
            {summaryData.length>0?(
        <table id='rm-deflict-table' width='max-content'>
                  <tr>
                    <th className='ta-b'>Count</th>
                    <th className='ta-b'>Month Requirement Qty MT</th>
                    <th className='ta-b'>OP Balance</th>
                    {dates.map((e)=>{
                      return(
                        
                        <th className='ta-b'>{moment(e.date, 'YYYY-MM-DD').format('DD-MM-YYYY')}</th>
                      )
                    })}
                    <th className='ta-b'>{ moment(form.getFieldValue('date')).format('DD-MM-YYYY')}</th>
                    <th className='ta-b'>Total</th>
                    <th className='ta-b'>Deviation</th>
                    <th className='ta-b'>Deviation(%)</th>
                   </tr>
                  {/* <tr>
                    <td className='ta-b'></td>
                    <td className='ta-b'></td>
                    <td className='ta-b'></td>
                    <td className='ta-b'></td>
                    <td className='ta-b'></td>

                  </tr> */}
                  {summaryData.map((e)=>{
                    console.log(e.count,'rrrrrrrrrrrr');
                    
                    totalDayReqQty = Number(totalDayReqQty) + Number(e.rmQty)
                    totalOpBal = Number(totalOpBal) + Number(e.opBal)
                    totalDay1 = Number(totalDay1) + Number(e.day1?e.day1:0)
                    totalDay2 = Number(totalDay2) + Number(e.day2?e.day2:0)
                    totalDay3 = Number(totalDay3) + Number(e.day3?e.day3:0)
                    totalDay4 = Number(totalDay4) + Number(e.day4?e.day4:0)
                    totalDay5 = Number(totalDay5) + Number(e.day5?e.day5:0)
                    totalDay6 = Number(totalDay6) + Number(e.day6?e.day6:0)
                    totalDay7 = Number(totalDay7) + Number(e.day7?e.day7:0)
                    totalDay8 = Number(totalDay8) + Number(e.day8?e.day8:0)
                    totalDay9 = Number(totalDay9) + Number(e.day9?e.day9:0)
                    totalDay10 = Number(totalDay10) + Number(e.day10?e.day10:0)
                    totalDeviation = Number(totalDeviation)+Number(Number(e.rmQty?e.rmQty:0)-Number(e.total))
                    totalDeviationPercent = Number(totalDeviationPercent)+e.rmQty==null?0:Number((Number(Number(e.rmQty?e.rmQty:0)-Number(e.total))/Number(e.rmQty?e.rmQty:0))*100)

                    selectedTotal = Number(selectedTotal) + Number(e.selectedDate)
                    totalQty = Number(totalQty) + Number(e.total)
                    if (e.day1) showDay1 = true;
  if (e.day2) showDay2 = true;
  if (e.day3) showDay3 = true;
  if (e.day4) showDay4 = true;
  if (e.day5) showDay5 = true;
  if (e.day6) showDay6 = true;
  if (e.day7) showDay7 = true;
  if (e.day8) showDay8 = true;
  if (e.day9) showDay9 = true;
  if (e.day10) showDay10 = true;
                    return(
                      <React.Fragment key={e.count}>
                  <tr>
                    <td className='ta-b' onClick={()=>handleRowClick(e.count)}>{e.count}{/^\d+-\d+$/.test(e.count) ? null : e.count.toUpperCase() === 'OTHERS'&&<InfoCircleFilled/>}</td>
                    <td className='ta-bb'>{e.rmQty?e.rmQty:0}</td>
                    <td className='ta-bb'>{Number(e.opBal)}</td>
                    {e.day1?<td className='ta-bb'>{Number(e.day1)}</td>:''}
                    {e.day2?<td className='ta-bb'>{Number(e.day2)}</td>:''}
                    {e.day3?<td className='ta-bb'>{Number(e.day3)}</td>:''}
                    {e.day4?<td className='ta-bb'>{Number(e.day4)}</td>:''}
                    {e.day5?<td className='ta-bb'>{Number(e.day5)}</td>:''}
                    {e.day6?<td className='ta-bb'>{Number(e.day6)}</td>:''}
                    {e.day7?<td className='ta-bb'>{Number(e.day7)}</td>:''}
                    {e.day8?<td className='ta-bb'>{Number(e.day8)}</td>:''}
                    {e.day9?<td className='ta-bb'>{Number(e.day9)}</td>:''}
                   { e.day10?<td className='ta-bb'>{Number(e.day10)}</td>:''}
                    <td className='ta-bb'>{Number(e.selectedDate)}</td>
                    <td className='ta-bb'>{Number(e.total)}</td>
                    <td className='ta-b'>{Number(e.rmQty)<e.total?<RiseOutlined  style={{color:'green'}}/>:<FallOutlined style={{color:'red'}}/>}{Number(Math.abs(Number(e.rmQty?e.rmQty:0)-Number(e.total)).toFixed(2))}</td>
                    <td className='ta-b'>{Number(Math.abs((Number(Number(e.rmQty?e.rmQty:0)-Number(e.total))/Number(e.rmQty?e.rmQty:1))*100).toFixed(2))}{e.rmQty==0?'':'%'}</td>
                  </tr>
           
                  {e.count.toUpperCase() === 'OTHERS' && isVisible === e.count && (
                  <>
                  <tr>
                    <th className='ta-b' colSpan={2}>Count</th>
                    <th className='ta-b'>OP Balance</th>
                    {dates.map((e)=>{
                      return(
                        
                        <th className='ta-b'>{moment(e.date, 'YYYY-MM-DD').format('DD-MM-YYYY')}</th>
                      )
                    })}
                    <th className='ta-b'>{ moment(form.getFieldValue('date')).format('DD-MM-YYYY')}</th>
                    <th className='ta-b'>Total</th>
                  </tr>

                  {othersCount.map((rec)=>{
                     return(
                      <React.Fragment key={rec.count}>
                         <tr>
                         <td className='ta-b' style={{backgroundColor:'beige'}} colSpan={2}>{rec.count}</td>
                         {/* <td className='ta-b'></td> */}
                         <td className='ta-bb' style={{backgroundColor:'beige'}}>{Number(rec.opBal)}</td>
                         {rec.day1?<td className='ta-bb' style={{backgroundColor:'beige'}}>{Number(rec.day1)}</td>:''}
                         {rec.day2?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day2)}</td>:''}
                         {rec.day3?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day3)}</td>:''}
                         {rec.day4?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day4)}</td>:''}
                         {rec.day5?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day5)}</td>:''}
                         {rec.day6?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day6)}</td>:''}
                         {rec.day7?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day7)}</td>:''}
                         {rec.day8?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day8)}</td>:''}
                         {rec.day9?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day9)}</td>:''}
                         {rec.day10?<td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.day10)}</td>:''}
                         <td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.selectedDate)}</td>
                         <td className='ta-bb'style={{backgroundColor:'beige'}}>{Number(rec.total)}</td>
                        {/* <td className='ta-b'>{(Number(e.rmQty?e.rmQty:0)-Number(e.total)).toFixed(2)}</td>
                        <td className='ta-b'></td> */}
                    </tr>
                      </React.Fragment>)
                  })}
                  </>
                  )}
                  </React.Fragment>
                    )
                  })}
              <tr>
                  <td className='ta-b'>Total</td>
                    <td className='ta-bb'>{Number(totalDayReqQty).toFixed(2)}</td>
                    <td className='ta-bb'>{Number(totalOpBal).toFixed(2)}</td>
                    {showDay1?<td className='ta-bb'>{Number(totalDay1).toFixed(2)}</td>:''}
                    {showDay2?<td className='ta-bb'>{Number(totalDay2).toFixed(2)}</td>:''}
                    {showDay3?<td className='ta-bb'>{Number(totalDay3).toFixed(2)}</td>:''}
                    {showDay4?<td className='ta-bb'>{Number(totalDay4).toFixed(2)}</td>:''}
                    {showDay5?<td className='ta-bb'>{Number(totalDay5).toFixed(2)}</td>:''}
                    {showDay6?<td className='ta-bb'>{Number(totalDay6).toFixed(2)}</td>:''}
                    {showDay7?<td className='ta-bb'>{Number(totalDay7).toFixed(2)}</td>:''}
                    {showDay8?<td className='ta-bb'>{Number(totalDay8).toFixed(2)}</td>:''}
                    {showDay9?<td className='ta-bb'>{Number(totalDay9).toFixed(2)}</td>:''}
                   { showDay10?<td className='ta-bb'>{Number(totalDay10).toFixed(2)}</td>:''}
                    <td className='ta-bb'>{Number(selectedTotal).toFixed(2)}</td>
                    <td className='ta-bb'>{Number(totalQty).toFixed(2)}</td>
                    <td className='ta-b'>{Number(totalDayReqQty)<totalQty?<RiseOutlined  style={{color:'green'}}/>:<FallOutlined style={{color:'red'}}/>}{Math.abs(Number(totalDeviation)).toFixed(2)}</td>
                    <td className='ta-b'>-</td>
                  </tr>

                </table>
                ):''}
                </Card>
    </>)
}
export default RmDeflictReport;