import React, { useEffect, useState } from 'react';
import { WarehouseDashboardService } from "@gtpl/shared-services/analytics"
import { LotCodeDropDown } from '@gtpl/shared-models/production-management';
import {Button, Card, Col, DatePicker, Descriptions, Form, Row, Select, Table} from 'antd'
import { ColumnProps } from 'antd/lib/table';
import moment from 'moment';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import { DateFilter } from '@gtpl/shared-models/common-models';

const {Option} = Select;
const {RangePicker} = DatePicker

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

export const LotWiseReport = () => {
  const service = new WarehouseDashboardService()
  const [lotWisePoInfo,setLotWisePoInfo] = useState<any[]>([])
  const [lotWiseQtyInfo,setLotWiseQtyInfo] = useState<any[]>([])
  const [page,setPage] = useState<number>(1)
  const [lotNums,setLotNums] = useState<any[]>([])
  const [form] = Form.useForm()
  let totalSoakInQty = 0
  let totalSoakOutQty = 0

  // useEffect(() => {
  //   getAllLots()
  // },[])

  // const getAllLots = () => {
  //   service.getAllLotNumbersDropdown().then(res => {
  //     if(res.status){
  //       setLotNums(res.data)
  //     }else{
  //       setLotNums([])
  //     }
  //   })
  // }

  const getLotWiseInfo = () => {
    const fromDate = moment(form.getFieldValue('reportingDate')[0]).format('YYYY-MM-DD')
    const toDate = moment(form.getFieldValue('reportingDate')[1]).format('YYYY-MM-DD')
    const req = new DateFilter(fromDate,toDate)
    service.getLotWiseReportInfo(req).then(res => {
      if(res.status){
        setLotWisePoInfo(res.data.lotWisePoInfo)
        setLotWiseQtyInfo(res.data.lotWiseQtyInfo)
      }else{
        setLotWisePoInfo([])
        setLotWiseQtyInfo([])
      }
    })
  }

  const columns :  ColumnProps<any>[] =[
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      responsive: ['sm'],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title:'Date',
      dataIndex:'date',
      render:(text,record) => {
        return(
          <>
          {record.date ? moment(record.date).format('YYYY-MM-DD') : '-'} 
          </>
        )
      }
    },
    {
      title:'Lot No',
      dataIndex:'lotNumber'
    },
    {
      title:'Variety',
      dataIndex:'variety'
    },
    {
      title:'Packing',
      dataIndex:'packing'
    },
    {
      title:'Grade',
      dataIndex:'grade'
    },
    {
      title:'MC',
      dataIndex:'cartons'
    },
    {
      title:'Loose Pouches',
      dataIndex:'loosePouches'
    },
    {
      title:'Brand',
      dataIndex:'brand'
    },
    {
      title:'Po No',
      dataIndex:'poNumber'
    },
    {
      title:'Total Qty',
      dataIndex:'qty',
      render:(text,record) => {
        return(
          <>
          {Number(text)}
          </>
        )
      }
    },
    {
      title:'Section',
      dataIndex:'section'
    },
    {
      title:'Production Location',
      dataIndex:'productionLocation'
    }

  ]

  const onSearch = () => {
    getLotWiseInfo()

  }

  const onReset = () => {
    form.resetFields()
    setLotNums([])
    setLotWisePoInfo([])
    setLotWiseQtyInfo([])
  }
 

  return (
   <Card size='small' title={<span style={{color:'white'}}>LotWise Summary Report</span>} 
   style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} extra={
    lotWisePoInfo.length > 0 ? 
    <ReactHTMLTableToExcel
    id="excel-button"
    className="download-table-xls-button"
    table="lotwise-report"
    filename="LotWiseReport"
    sheet="Sheet 1"
    buttonText="Get Excel"
    /> : <></>

   } >
    <Form form={form} onFinish={onSearch} layout='vertical'>
      <Row gutter={24}>
        {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
        <Form.Item label='Lot Number' name='lotNumber'>
        <Select allowClear showSearch optionFilterProp='children' placeholder='Select Lot Number'>
          {
            lotNums.map(e => {
              return(
                <Option key={e.lotNumber} value={e.lotNumber}>{e.lotNumber}</Option>
              )
            })
          }
        </Select>
        </Form.Item>
        </Col> */}
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }}>
        <Form.Item label='Reporting Date' name='reportingDate'>
          <RangePicker style={{width:'100%'}}/>
        </Form.Item>
        </Col>

        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{marginTop:'2.5%'}}> 
        <Button htmlType='submit' type='primary'>Search</Button>
        </Col>
        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 2 }} style={{marginTop:'2.5%'}}>
        <Button danger onClick={onReset}>Reset</Button>
        </Col>
      </Row>
    </Form>
   
      {
        lotWisePoInfo.length > 0 ? (<>
        
        <Table dataSource={lotWisePoInfo} columns={columns}/>
        <br/>
        {/* <div id='lotwise-report'> */}
          <table id='lotwise-report' width='100%'>
            <table hidden>
              <tr>
                <th>Date</th>
                <th>Lot No</th>
                <th>variety</th>
                <th>Packing</th>
                <th>Grade</th>
                <th>MC</th>
                <th>Loose Pouches</th>
                <th>Brand</th>
                <th>PO No</th>
                <th>Total Qty</th>
                <th>Section</th>
                <th>production Location</th>
              </tr>
              {
                lotWisePoInfo.map(e => {
                  return(
                    <>
                    <tr>
                      <td>{moment(e.date).format('YYYY-MM-DD')}</td>
                      <td>{e.lotNumber}</td>
                      <td>{e.variety}</td>
                      <td>{e.packing}</td>
                      <td>{e.grade}</td>
                      <td>{e.cartons}</td>
                      <td>{e.loosePouches}</td>
                      <td>{e.brand}</td>
                      <td>{e.poNumber}</td>
                      <td>{e.qty}</td>
                      <td>{e.section}</td>
                      <td>{e.productionLocation}</td>
                    </tr>
                    </>
                  )
                })
              }
            </table>
            <table style={{borderCollapse:'collapse',borderBlockColor:'black',width:'100%'}}>
              {/* <tr>
                <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>PURCHASE DATE</th>
                <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{lotWiseQtyInfo[0]?.purhcaseDate ? moment(lotWiseQtyInfo[0]?.purhcaseDate).format('YYYY-MM-DD') : '-'}</td>
              </tr> */}
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>HON</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{Number(lotWiseQtyInfo[0]?.honQty)}</td>
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>HLS</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{Number(lotWiseQtyInfo[0]?.hlQty)}</td>
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>YIELD</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{((Number(lotWiseQtyInfo[0]?.hlQty) / Number(lotWiseQtyInfo[0]?.honQty))*100).toFixed(2)}</td>
              </tr>
              <tr>
                <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}></th>
                {
                lotWiseQtyInfo.map(e => {
                  return(
                    <>
                    <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>{e.product}</td>
                    </>
                  )
                })
              }
              </tr>
              <tr>
                <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>SOAK IN</th>
                {
                lotWiseQtyInfo.map(e => {
                  totalSoakInQty += Number(e.soakingInQty)
                  return(
                    <>
                    <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>{e.soakingInQty}</td>
                    </>
                  )
                })
              }
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>SOAK OUT</th>
              {
                lotWiseQtyInfo.map(e => {
                  totalSoakOutQty += Number(e.soakOutQty)
                  return(
                    <>
                    <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>{Number(e.soakOutQty)}</td>
                    </>
                  )
                })
              }
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>YIELD</th>
              {
                lotWiseQtyInfo.map(e => {
                  return(
                    <>
                    <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>{((Number(e.soakOutQty)/ Number(e.soakingInQty))*100).toFixed(2)}</td>
                    </>
                  )
                })
              }
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>PEELING YIELD</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{((totalSoakInQty / Number(lotWiseQtyInfo[0]?.hlQty))*100).toFixed(2)}</td>
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>TOTAL PRODUCTION QTY</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{Number(totalSoakOutQty)}</td>
              </tr>
              <tr>
              <th style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}}>FINAL YIELD</th>
              <td style={{textAlign:'center',fontSize:'15px',border:'1px solid black'}} colSpan={lotWiseQtyInfo.length}>{((Number(totalSoakOutQty)/Number(lotWiseQtyInfo[0]?.hlQty))*100).toFixed(2)}</td>
              </tr>
            </table>

          </table>
        {/* </div> */}

        </>) : (<></>)
      }
   </Card>
  );
}

export default LotWiseReport;