import React, { useEffect, useRef, useState } from 'react';
import {
  Table,
  Card,
  Tabs,
  DatePicker,
  Form,
  Col,
  Input,
  Select,
  Row,
  Button,
  Statistic,
  Collapse,
} from 'antd';
import './repacking-reprocessing-report.css';
import { FgStockTransferService } from 'libs/shared-services/warehouse-management/src/lib/fg-stock-transfer.service';
import moment from 'moment';
import { useForm } from 'antd/lib/form/Form';
import { fgStockRepackingReportReq } from 'libs/shared-services/warehouse-management/src/lib/fg-stock-transfer-request';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';

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

export function RepackingReprocessingReport(
  props: RepackingReprocessingReportProps
) {
  const { RangePicker } = DatePicker;
  const [repackingSummary,setRepackingSummary]=useState<any>()
  const service=new FgStockTransferService()
  const [fgStockReport,setFgStockReport]=useState<any>([])
  const {Option}=Select
  const [form] = Form.useForm()
  const [isVisible,setIsVisible]=useState<boolean>(false)
  const { Panel } = Collapse;
  useEffect(()=>{
    // getFgStockRepackingReprocessReport()
    // getFgRepackReprocessDetailReport()
  },[])

  const getFgStockRepackingReprocessReport=()=>{
    const req=new fgStockRepackingReportReq()

    const outDate = form.getFieldValue("outDate");
    if (outDate && outDate.length === 2) {
      req.fromOutDate = outDate[0].format("YYYY-MM-DD"); 
      req.toOutDate = outDate[1].format("YYYY-MM-DD"); 
    }
    const inDate = form.getFieldValue("inDate");
    if (inDate && inDate.length === 2) {
      req.fromInDate = inDate[0].format("YYYY-MM-DD"); 
      req.toInDate = inDate[1].format("YYYY-MM-DD"); 
    }
    service.getFgStockRepackingReprocessReport(req).then((res)=>{
      if(res.status){
        setRepackingSummary(res.data)
        setIsVisible(true)
      }
    })
  }

  const getFgRepackReprocessDetailReport=()=>{
    const req=new fgStockRepackingReportReq()

    const transferType = form.getFieldValue('transferType');
  if (transferType !== undefined) {
    req.transferType = transferType;
  }

    const outDate = form.getFieldValue("outDate");
    if (outDate && outDate.length === 2) {
      req.fromOutDate = outDate[0].format("YYYY-MM-DD"); 
      req.toOutDate = outDate[1].format("YYYY-MM-DD"); 
    }
    const inDate = form.getFieldValue("inDate");
    if (inDate && inDate.length === 2) {
      req.fromInDate = inDate[0].format("YYYY-MM-DD"); 
      req.toInDate = inDate[1].format("YYYY-MM-DD"); 
    }
    service.getFgRepackReprocessDetailReport(req).then((res)=>{

      if(res.status){
        setFgStockReport(res.data)
        setIsVisible(true)

      }else{
        setFgStockReport([])
        setIsVisible(false)

      }
    })
  }

  const onFinish = () => {
    getFgRepackReprocessDetailReport()
    getFgStockRepackingReprocessReport()
}

const onReset=()=>{
  form.resetFields()
  setIsVisible(false)
}



  return (
    <div>
      <h1>
        <Card
          title={
            <span style={{ color: 'white' }}>Repacking & Reprocessing</span>
          }
          style={{ textAlign: 'center' }}
          headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        >
                    <Form form={form} onFinish={onFinish}  layout='vertical'>
            <Row gutter={24}>
            <Col span={6} style={{ marginLeft: '1%' }}>
                <Form.Item
                  name="transferType"
                  label="Job Purpose"
                >
                  <Select
                    showSearch
                    placeholder="Select Job Purpose "
                    allowClear
                  >
                    <Option name="reprocessing" value="reprocessing">Re Processing </Option>
                    <Option name="repacking" value="repacking">Re Packing </Option>
                    <Option name="rework" value="rework">Re Work </Option>
                    <Option name="labsamples" value="labsamples">Lab Samples </Option>
                    <Option name="complements" value="complements">Compliments</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  name="inDate"
                  label="In Date"
                >
                  <RangePicker />
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  name="outDate"
                  label="Out Date"
                >
                  <RangePicker />
                </Form.Item>
              </Col>
              </Row>
              <Row style={{textAlign:"right"}}>
              <Col >
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                
              >
                Get Report
              </Button>
            </Form.Item>
          </Col>
         &nbsp;&nbsp;&nbsp;
          <Col >
            <Form.Item>
              <Button
                type="primary"
                onClick={onReset}
                style={{ width: "100%" }}
              >
                Reset
              </Button>
            </Form.Item>
          </Col>
            </Row>
          </Form>
          <br></br>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        {isVisible && (
        <ReactHTMLTableToExcel 
        id='excel-button'
        // className='download-table-xls-button'
        table='report-table'
        filename='repacking-reprocessing-report'
        sheet="Sheet1"
        buttonText='Get Excel'
        // className="ant-btn ant-btn-primary"
              />
            ) }
          </div>  
          {isVisible && (
          <html>
          <body>
          <table id='report-table'>
          <Collapse defaultActiveKey={['1']} style={{  marginTop: '20px', width: '50%' }}>
          <Panel header="Report Summary" key="1">
            <table style={{ borderCollapse: 'collapse', width: '80%',
                  marginTop: '0',
                  marginBottom: '0',textAlign:"center" }}>
              <tr>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Assigned Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Recieved Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Rejected Qty</th>
              </tr>
              <tr>
              <th style={{ textAlign: 'center', border: '1px solid #000' }}>Re Packing</th>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "repacking")?.totalIssuedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
              {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "repacking")?.totalReceivedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</td>
            </tr>

              <tr>
              <th style={{ textAlign: 'center', border: '1px solid #000' }}>Re Processing</th>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "reprocessing")?.totalIssuedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
              {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "reprocessing")?.totalReceivedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</td>
                          </tr>
              <tr>
              <th style={{ textAlign: 'center', border: '1px solid #000' }}>Re Work</th>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "rework")?.totalIssuedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
              {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "rework")?.totalReceivedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</td>
              </tr>
              <tr>
              <th style={{ textAlign: 'center', border: '1px solid #000' }}>Lab Samples</th>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "labsamples")?.totalIssuedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
              {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "labsamples")?.totalReceivedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</td></tr>
              <tr>
              <th style={{ textAlign: 'center', border: '1px solid #000' }}>Compliments</th>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
                {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "complements")?.totalIssuedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>
              {repackingSummary?.length ? repackingSummary?.find((item: any) => item.jobPurpose === "complements")?.totalReceivedQty || "0": "0"}
              </td>
              <td style={{ textAlign: 'center', border: '1px solid #000' }}>&nbsp;</td></tr>
            </table>
            </Panel>
            </Collapse>
            <br /><br />
            <table style={{ borderCollapse: 'collapse', width: '100%',
                  marginTop: '0',
                  marginBottom: '0' }}>
                    <thead>
              <tr>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>S.No</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Customer Po No</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Process</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>JobCode</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Out Date</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>In Date</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Product</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Assign Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Received Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Excess Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Rejected Qty</th>
                <th style={{ textAlign: 'center', border: '1px solid #000' }}>Status</th>
              </tr>
              </thead>
              <tbody>
             
               {fgStockReport.map((rec, idx)=>{
                const issuedQty=rec.issuedQty?rec.issuedQty:"0"
                const receivedQty=rec.receivedQty?rec.receivedQty:"0"
                const excessQty=issuedQty-receivedQty
                return(
                  <>
                  <tr key={idx}>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{idx + 1}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.poNumber?rec.poNumber:"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.jobPurpose?rec.jobPurpose:"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.jobCode?rec.jobCode:"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.outDate?moment(rec.outDate).format('DD-MM-YYYY'):"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.inDate?moment(rec.inDate).format('DD-MM-YYYY'):"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.shortCode?rec.shortCode:"-"}</td>
                  <td style={{ textAlign: 'right', border: '1px solid #000' }}>{rec.issuedQty?parseFloat(rec.issuedQty):"-"}</td>
                  <td style={{ textAlign: 'right', border: '1px solid #000' }}>{rec.receivedQty?parseFloat(rec.receivedQty):"-"}</td>
                  <td style={{ textAlign: 'right', border: '1px solid #000' }}>{excessQty}</td>
                  <td style={{ textAlign: 'right', border: '1px solid #000' }}>{rec.rejectedQty?parseFloat(rec.rejectedQty):"-"}</td>
                  <td style={{ textAlign: 'center', border: '1px solid #000' }}>{rec.status?rec.status:"-"}</td>

                  </tr>
                  </>
                )
               })}
            
              </tbody>
            </table>
            </table>
          </body>
          </html>
)}
        </Card>
      </h1>
    </div>
  );
}

export default RepackingReprocessingReport;