import { GrnInspectionreq, QuantityDeviationRequest, grnReportreq } from "@gtpl/shared-models/procurement-management";
import { Button, Card, Col, DatePicker, Form, Input, Row, Select, Table } from "antd"
import { ColumnsType } from "antd/lib/table";
import React, { useState, useRef, useEffect } from "react";
import Highlighter from 'react-highlight-words';
import { CheckCircleOutlined, CloseCircleOutlined, RightSquareOutlined, EyeOutlined, EditOutlined,ArrowDownOutlined,ArrowUpOutlined, SearchOutlined,UndoOutlined,DownloadOutlined } from '@ant-design/icons';
import { GrnService } from "@gtpl/shared-services/procurement";
import moment from "moment";
import form from "antd/lib/form";
import { Excel } from 'antd-table-saveas-excel';
import { HarvestTypes } from "@gtpl/shared-models/common-models";

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

export function QuantityDeviationReport(
  props: QuantityDeviationReportProps
) {

    
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = useState<number>(null);
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState(''); 
  const [searchedColumn, setSearchedColumn] = useState('');
  const [data, setData] = useState([]);
  const [filters, setFilters] = useState([]);
  const [excelData, setExcelData] = useState([]);
  const { RangePicker } = DatePicker;
  const [form] = Form.useForm();
  const [batches, setBatches] = useState([]);
  const [farmers, setFarmers] = useState([]);
  const [harvestType,setHarvestType] = useState([]);
  const {Option}=Select;
  const [selectedHarvestType, setSelectedHarvestType] = useState(HarvestTypes.Live_Harvest);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 100,
});

  useEffect(() => {
    form.setFieldsValue({ harvestType: HarvestTypes.Live_Harvest });
  }, [form]);

  const handleHarvestChange = (value) => {
    setSelectedHarvestType(value);
  };

  const service  = new GrnService()
  useEffect(() => {
     getData();
    getAll()
  }, [])
  const getAll = () =>{

    service.getQuantityDeviationIndents ().then((res)=>{
      if(res.status){
          setFilters(res.data)
      }
  })
  service.getQuantityDeviationBatches ().then((res)=>{
    if(res.status){
        setBatches(res.data)
    }
}) 
service.getQuantityDeviationFarmers ().then((res)=>{
  if(res.status){
      setFarmers(res.data)
  }
})
  }
  const getData = () =>{
    const req = new QuantityDeviationRequest()
    if(form.getFieldValue('grnId') !== undefined){
        req.grnId=form.getFieldValue('grnId')
  
      }
      if (form.getFieldValue('grnDate') !== undefined) {
        req.grnfromDate = (form.getFieldValue('grnDate')[0]).format('YYYY-MM-DD')
      }
      if (form.getFieldValue('grnDate') !== undefined) {
      req.grnToDate = (form.getFieldValue('grnDate')[1]).format('YYYY-MM-DD')
      }
      if (form.getFieldValue('indent_id') !== undefined) {
        req.indentId=form.getFieldValue('indent_id')
        }
        if (form.getFieldValue('batchNum') !== undefined) {
          req.batchNum=form.getFieldValue('batchNum')
          }
          if (form.getFieldValue('farmer') !== undefined) {
            req.farmer=form.getFieldValue('farmer')
            }
            req.harvestType = form.getFieldValue('harvestType');
            console.log(req,'ooooooo');
            
service.getQuantityDeviation (req).then((res)=>{
    if(res.status){
        setData(res.data)
    }
})
  }
    const getColumnSearchProps = (dataIndex: string) => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }}>
            <Input
              ref={searchInput}
              placeholder={`Search ${dataIndex}`}
              value={selectedKeys[0]}
              onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Button
              type="primary"
              onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90, marginRight: 8 }}
            >
              Search
            </Button>
            <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
              Reset
            </Button>
          </div>
        ),
        filterIcon: filtered => (
          <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
        onFilter: (value, record) =>
          record[dataIndex]
            ? record[dataIndex]
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase())
            : false,
        onFilterDropdownVisibleChange: visible => {
          if (visible) { setTimeout(() => searchInput.current.select()); }
        },
        render: text =>
          text ? (
            searchedColumn === dataIndex ? (
              <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[searchText]}
                autoEscape
                textToHighlight={text.toString()}
              />
            ) : text
          )
            : null
    
      });
      /**
        * 
        * @param selectedKeys 
        * @param confirm 
        * @param dataIndex 
        */
        function handleSearch(selectedKeys, confirm, dataIndex) {
          confirm();
          setSearchText(selectedKeys[0]);
          setSearchedColumn(dataIndex);
        };
        function handleReset(clearFilters) {
            clearFilters();
            setSearchText('');
          };
          const onFinish = (val) => {
            console.log(val);
            
            getData()
            };
          
            const onReset = () => {
              form.resetFields();
              getData();
            };
          const columns:any= [
            {
                title: 'S No',
                key: 'sno',
                width: '70px',
                responsive: ['sm'],
                render: (_, __, index) => ((pagination.current - 1) * pagination.pageSize) + index + 1,

              },
            
            {
                title: 'Indent Number',
                dataIndex:"indentNum",
                width: '100px',
                  sorter: (a, b) => a.indentNum.length-(b.indentNum.length),
                sortDirections: ['descend', 'ascend'],
                // ...getColumnSearchProps('indentNum')
                render:(e,val)=>{
                  return (val.indentNum? val.indentNum:'-')
                }
              },
            {
              title: 'Farmer',
              dataIndex:"farmer",
              // width: '100px',
              sorter: (a, b) => a.farmer-b.farmer,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('farmer')
              render:(e,val)=>{
                return (val.farmer? val.farmer:'-')
              }
            },
            {
              title: 'Grader',
              dataIndex:"graderName",
              width: '160px',
              sorter: (a, b) => a.graderName-b.graderName,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('graderName')
              render:(e,val)=>{
                return (val.graderName? val.graderName:'-')
              }
            },
            {
              title: 'Vehicle No',
              dataIndex:"vehicleNum",
              width: '130px',
              sorter: (a, b)  => a.vehicleNum?.localeCompare(b.vehicleNum),
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('vehicleNum')
              render:(e,val)=>{
                return (val.vehicleNum? val.vehicleNum:'-')
              }
            },
            {
              title: 'Batch Number',
              dataIndex:"plant_lot_number",
              width: '140px',
              sorter: (a, b) => a.plant_lot_number-b.plant_lot_number,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('plant_lot_number')
              render:(e,val)=>{
                return (val.plant_lot_number? val.plant_lot_number:'-')
              }
            },
            {
              title: 'GRN Number',
              dataIndex:"grnNum",
              // width: '100px',
              sorter: (a, b) => a.grnNum.localeCompare(b.grnNum),
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('grnNum'),
              render:(e,val)=>{
                return (val.grnNum? val.grnNum:'-')
              }
            },
            {
              title: 'GRN Date',
              dataIndex:"grnDate",
              // width: '100px',
              render: (value) => {
                  return moment(value).format('DD-MM-YYYY')
              }
            },
                
            {
              title: 'Grn Count',
              dataIndex:"count",
              width: '100px',
              sorter: (a, b) => a.count-b.count,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('count')
              render:(e,val)=>{
                return (val.count? Number(val.count):'-')
              }
            },
            // ...(selectedHarvestType === HarvestTypes.Re_Weighment
              // ? [
                  {
                    title: 'Reweighment Count',
                    dataIndex: 'reweighmentCount',
                    // width: '70px',
                    sorter: (a, b) => a.reweighmentCount - b.reweighmentCount,
                    sortDirections: ['descend', 'ascend'],
                    render: (e, val) => (val.reweighmentCount ? val.reweighmentCount : '-'),
                  },
                // ]
              // : []),
            {
              title: 'Grn Boxes',
              dataIndex:"boxes",
              width: '100px',
              sorter: (a, b) => a.boxes-b.boxes,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('invoice')
              render:(e,val)=>{
                return (val.boxes? val.boxes:'-')
              }
            },
            {
              title: 'ReWeighment Boxes',
              dataIndex:"rmBoxesCount",
              width: '150px',
              sorter: (a, b) => a.rmBoxesCount-b.rmBoxesCount,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('rmBoxesCount')
              render:(e,val)=>{
                return (val.rmBoxesCount? val.rmBoxesCount:'-')
              }
              
            },
            {
              title: 'Grn Quantity',
              dataIndex:"quantity",
              width: '70px',
              sorter: (a, b) => a.quantity-b.quantity,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('invoice')
              render:(e,val)=>{
                return (val.quantity? Number(val.quantity):'-')
              }
            },  
            {
              title: 'ReWeighment Quantity',
              dataIndex:"rmQty",
              width: '150px',
              sorter: (a, b) => a.rmQty-b.rmQty,
              sortDirections: ['descend', 'ascend'],
              // ...getColumnSearchProps('rmQty')
              render:(e,val)=>{
                return (val.rmQty? Number(val.rmQty):'-')
              }
            },  
         
            {
                title: "Deviation",
                dataIndex: "age",
                width: '100px',
                fixed:'right',
                render:(text,record,index) => {        
                    
                    const diff = (Number(record.rmQty ? record.rmQty:0) - Number(record.quantity ? record.quantity:0)) ;
                    console.log(diff);
                    
                  return(
                    <>
                      {Number(diff) === 0 ? 0 : ''}
                      {Number(diff) < 0 ? <span style={{ color: 'red' }} > {Number(diff).toLocaleString('en-IN', {
                          maximumFractionDigits: 0
                      })}<ArrowDownOutlined style={{ color: "red" }} /> </span> : ''}
                      {Number(diff) > 0 ? <span style={{ color: 'green' }} > {Number(diff).toLocaleString('en-IN', {
                          maximumFractionDigits: 0
                      })} <ArrowUpOutlined style={{ color: "green" }} /></span> : ''}
                 
                    {/* {record.quantity ?  diff.toFixed(2) : '-'} */}
                    </>
                  )
                  
                }
               
              },

    
        ];
        const excelColumns = [
          {
            title: 'S No',
            dataIndex: 'sno',
            key: 'sno',
            responsive: ['sm'],
            render: (text, object, index) => (page - 1) * pageSize + (index + 1),
          },
          {
            title: 'Indent Number',
            dataIndex: 'indentNum',
            // render: (e, val) => (val.indentNum ? val.indentNum : '-'),
          },
          {
            title: 'Farmer',
            dataIndex: 'farmer',
            // render: (e, val) => (val.farmer ? val.farmer : '-'),
          },
          {
            title: 'Grader',
            dataIndex: 'graderName',
            // render: (e, val) => (val.graderName ? val.graderName : '-'),
          },
          {
            title: 'Vehicle No',
            dataIndex: 'vehicleNum',
            // render: (e, val) => (val.vehicleNum ? val.vehicleNum : '-'),
          },
          {
            title: 'Batch Number',
            dataIndex: 'plant_lot_number',
            // render: (e, val) => (val.plant_lot_number ? val.plant_lot_number : '-'),
          },
          {
            title: 'GRN Number',
            dataIndex: 'grnNum',
            // render: (e, val) => (val.grnNum ? val.grnNum : '-'),
          },
          {
            title: 'GRN Date',
            dataIndex: 'grnDate',
            // render: (value) => (value ? moment(value).format('DD-MM-YYYY') : '-'),
          },
          {
            title: 'Grn Count',
            dataIndex: 'count',
            // render: (e, val) => (val.count ? val.count : '-'),
          },
          {
            title: 'Reweighment Count',
            dataIndex: 'reweighmentCount',
            // render: (e, val) => (val.reweighmentCount ? val.reweighmentCount : '-'),
          },
          {
            title: 'Grn Boxes',
            dataIndex: 'boxes',
            render: (e, val) => (val.boxes ? val.boxes : '-'),
          },
          {
            title: 'ReWeighment Boxes',
            dataIndex: 'rmBoxesCount',
            render: (e, val) => (val.rmBoxesCount ? val.rmBoxesCount : '-'),
          },
          {
            title: 'Grn Quantity',
            dataIndex: 'quantity',
            render: (e, val) => (val.quantity ? val.quantity : '-'),
          },
          {
            title: 'ReWeighment Quantity',
            dataIndex: 'rmQty',
            render: (e, val) => (val.rmQty ? val.rmQty : '-'),
          },
          {
            title: 'Deviation',
            dataIndex: 'deviation',
            render: (text, record) => {
              const diff = (Number(record.rmQty || 0) - Number(record.quantity || 0));
              return <span>{Number(diff).toFixed(2)}</span>;
            },
          },
        ];
        
        const exportExcel = () => {
          const excel = new Excel();
        
          let grnBoxes = 0;
          let reweighmentBoxes = 0;
          let grnQuantity = 0;
          let rmQtyy = 0;
        
          data.forEach(({ boxes, rmBoxesCount, quantity, rmQty }) => {
            grnBoxes += parseFloat(boxes) || 0;
            reweighmentBoxes += parseFloat(rmBoxesCount) || 0;
            grnQuantity += parseFloat(quantity) || 0;
            rmQtyy += parseFloat(rmQty) || 0;
          });
        
          const totalRow = {
            sno: undefined,
            indentNum: 'Total',
            boxes: grnBoxes.toFixed(2),
            rmBoxesCount: reweighmentBoxes.toFixed(2),
            quantity: grnQuantity.toFixed(2),
            rmQty: rmQtyy.toFixed(2),
          };
        
          const exportData = [...data, totalRow];
        
          excel
            .addSheet('quantity-deviation-report')
            .addColumns(excelColumns)
            .addDataSource(exportData, { str2num: true })
            .saveAs('quantity-deviation-report.xlsx');
        };
        

          const handleTableChange = (pagination) => {
            setPagination(pagination);
        };
    
return(
    <Card  title={<span style={{color:'white'}}>Quantity Deviation Report</span>} style={{textAlign:'center'}} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    extra={
      <div>
        <Button icon={<DownloadOutlined />} onClick={() => { exportExcel(); }} style={{marginRight:30}}>
          GET EXCEL
        </Button>
        {/* <Button icon={<FilePdfOutlined  />} onClick={() => { handleExportPDF(); }}>
          Download PDF
        </Button> */}
      </div>
    }>
         <Form form={form} 
        onFinish={onFinish}
        layout="vertical"
        >
        <Row gutter={12}>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item name="grnId" label="GRN Number">
              <Select
                showSearch
                placeholder="Select GRN Number"
                optionFilterProp="children"
                allowClear
              >
                {filters.map((qc: any) => (
                  <Select.Option key={qc.grn_id} value={qc.grn_id}>
                    {qc.grnNum}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>   
          </Col>
          <Col xs={24} sm={12} md={8} lg={8} xl={4}>
            <Form.Item name="indent_id" label="Indent Number">
              <Select
                showSearch
                placeholder="Select Indent Number"
                optionFilterProp="children"
                allowClear
              >
                {filters.map((qc: any) => (
                  <Select.Option key={qc.indent_id} value={qc.indent_id}>
                    {qc.indentNum}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>   
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Form.Item name="batchNum" label="Batch Number">
              <Select
                showSearch
                placeholder="Select Batch Number"
                optionFilterProp="children"
                allowClear
              >
                {batches.map((qc: any) => (
                  <Select.Option key={qc.plant_lot_number} value={qc.plant_lot_number}>
                    {qc.plant_lot_number}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>   
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={5}>
            <Form.Item name="farmer" label="Farmer">
              <Select
                showSearch
                placeholder="Select Farmer"
                optionFilterProp="children"
                allowClear
                dropdownMatchSelectWidth={false}
              >
                {farmers.map((qc: any) => (
                  <Select.Option key={qc.farmer} value={qc.farmer}>
                    {qc.farmerName}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>   
          </Col>
         <Col span={5}>
            <Form.Item label="GRN Date" name="grnDate">
              <RangePicker />
            </Form.Item>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={5}>
            <Form.Item name="harvestType" label="Harvest Type">
            <Select
          placeholder="Select Harvest Type"
          onChange={handleHarvestChange}        
            allowClear
          style={{ width: '100%' }}
          showSearch
        >
          {Object.values(HarvestTypes).map((type) => (
            <Option key={type} value={type}>
              {type}
            </Option>
          ))}
        </Select>
            </Form.Item>   
          </Col>
              {/* </Row>
       <Row style={{justifyContent:'flex-end'}}> */}

          <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
            <Form.Item>
              <Button
                htmlType='submit'
                type="primary"
                style={{ width: '100px', marginRight: "10px" }}>
                Get Report
              </Button>
            </Form.Item>
          </Col>
          <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
            <Form.Item>
              <Button
                type="primary"
                icon={<UndoOutlined />}
                onClick={onReset}
                
              >
                Reset
              </Button>
            </Form.Item>
          </Col>
       </Row>
          </Form>
        <Table columns={columns} dataSource={data} scroll={{ x:'max-content',y:1024 }}
                    size='small'
                    pagination={{
                      pageSize: pagination.pageSize,
                      current: pagination.current,
                      onChange: (page, pageSize) => handleTableChange({ current: page, pageSize }),
                  }}
                  onChange={handleTableChange}
                    bordered
                    summary={(pageData) => {
                      let grnBoxes = 0;
                      let reweighmentBoxes = 0;
                      let grnQuantity = 0;
                      let rmQtyy=0
                    
                      pageData.forEach(({ boxes,rmBoxesCount ,quantity,rmQty}) => {
                          grnBoxes += parseFloat(boxes) || 0;
                          reweighmentBoxes += parseFloat(rmBoxesCount) || 0;
                          grnQuantity += parseFloat(quantity) || 0;
                          rmQtyy += parseFloat(rmQty) || 0;

                        });
                    
                      return (
                        <Table.Summary.Row>
                          <Table.Summary.Cell index={9} colSpan={10}>
                            Total
                          </Table.Summary.Cell>
                          <Table.Summary.Cell index={10}>
                            {grnBoxes.toFixed(2)}
                          </Table.Summary.Cell>
            
                          <Table.Summary.Cell index={11}>
                            {reweighmentBoxes.toFixed(2)}
                          </Table.Summary.Cell>
                          <Table.Summary.Cell index={12}>
                            {grnQuantity.toFixed(2)}
                          </Table.Summary.Cell>
                          <Table.Summary.Cell index={13}>
                            {rmQtyy.toFixed(2)}
                          </Table.Summary.Cell>
                        </Table.Summary.Row>
                      );
                    }}
                    />
    </Card>
)

}

export default QuantityDeviationReport;