import React, { useState } from 'react';
import {FgPriceListRequest} from '../../../../../../shared-models/masters/src/lib/fg-pricelist'
import { Card, Form, Input, Row, Col, Button } from 'antd';
import { Link, useHistory } from 'react-router-dom';
import Papa from 'papaparse'
import * as XLSX from 'xlsx';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { FgDamagesResponseModel } from '@gtpl/shared-models/warehouse-management';
import { FileExcelFilled } from "@ant-design/icons";
import { Excel } from "antd-table-saveas-excel";
import { SuppliersService } from '@gtpl/shared-services/masters';
import { FarmersRequestModelDto } from '@gtpl/shared-models/masters';
/* eslint-disable-next-line */
export interface FarmersExcelUploadProps {
  fgPriceListData: FgPriceListRequest;
  updateDetails: (endCustomers: FgPriceListRequest) => void;
  isUpdate: boolean;
  closeForm: () => void;
 }

export function FarmersExcelUpload(
  props: FarmersExcelUploadProps
) {

  const [selectedFile, setSelectedFile] = useState(null);
  const [form] = Form.useForm();
  const [data, setData] = useState()
  const [columns, setColumns] = useState([]);
  const [values, setValues] = useState([])
  const service = new SuppliersService()
  const [loading, setLoading] = useState(false);
  const [jsonData, setJsonData] = useState(null);
  let history = useHistory();

  const importExcel = (file: any[]) => {
      var data = new Uint8Array(file);
      var wb = XLSX.read(data, { type: 'array', cellDates: true });
      let sheet: any[] = [];
      for (const Sheet in wb.Sheets) {
        if(Sheet){
          if (wb.Sheets.hasOwnProperty(Sheet)) {
              sheet.push(XLSX.utils.sheet_to_json(wb.Sheets[Sheet], { raw: true, header: 1 }));
          }
        }
      }
      return sheet;
  }

  const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file && file.type === 'text/csv') {
        setSelectedFile(event.target.files[0]);
        Papa.parse(event.target.files[0], {
          header: true,
          complete: function (result) {
            {
              const columnArray = [];
              const valueArray = [];
              
              result.data.map((d) => {
                                  columnArray.push(Object.keys(d))
                  valueArray.push(Object.values(d))
                            });
                          setData(result.data)
              setColumns(columnArray[0])
              setValues(valueArray)
            }
          },
          skipEmptyLines: true,
        });
      } else if(file && file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
        setSelectedFile(event.target.files[0]);
        let csvData
        var reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = async data => {
          let csvData1: any = reader.result;
          csvData = importExcel(csvData1);
          const filteredNestedData = csvData.filter(innerData => innerData.some(row => row.length > 0));
          const output = filteredNestedData.map(innerData => {
            const header = innerData[0];
            return innerData.slice(1).map(row => {
              if (row.every(value => value === '')) {
                return null; // Skip rows with all empty values
              }
              return row.reduce((acc, value, index) => {
                acc[header[index]] = value;
                return acc;
              }, {});
            }).filter(row => row !== null); // Remove rows with all empty values
          });  
             setData(output[0])   
        }
      }else {
        alert('Please select a valid .csv file.');
        setSelectedFile(null);
      }
    };

 

  // const handleFileChange = (event) => {
  //   const file = event.target.files[0];
  //   setSelectedFile(event.target.files[0]);
  //   const reader = new FileReader();
  
  //   reader.onload = (e:any) => {
  //     const data = new Uint8Array(e.target.result);
  //     const workbook = XLSX.read(data, { type: 'array' });
  //     const worksheet = workbook.Sheets[workbook.SheetNames[0]];
  
  //     // Specify the desired column names in the headers array
  //     const headers = ["s_no","destination","buyer_code", "buyer_address", 'delivery_code', 'delivery_address'];

  //       // Pass the headers array to the sheet_to_json function
  //       const json = XLSX.utils.sheet_to_json(worksheet, { header: headers });
  //        json.splice(0, 2);
  //       setData(json);
      
  //   };
  //   reader.readAsArrayBuffer(file);
  // };
  

    
  let createdUser="";
  if(!props.isUpdate){
    createdUser= localStorage.getItem("createdUser");
  }
    const handleUpload = async() => {
      try{
          form.validateFields().then(async () => {
            const req = new FarmersRequestModelDto(data,createdUser)
              const res = await service.createFarmer(req).then(res => {
                  setLoading(true);
                  if(res.status){
                      AlertMessages.getSuccessMessage(res.internalMessage)
                      setLoading(false)
                       history.push("/farmers-view")

                  } else{
                    setLoading(false)
                      AlertMessages.getErrorMessage(res.internalMessage)
                    }
                  })
                })
      } catch (error) {
          AlertMessages.getErrorMessage(error.message);
        }
    }
    const  exceldata =  [
      {
        title: 'SNo', dataIndex: 'sNo', render: (text, object, index) => {
          
            return index + 1

          },

          
      },
      {
         title: 'FarmerName', 
         dataIndex: 'supplierName',
    
          render: (text: any, record: any) => { return record.supplierName ? record.supplierName : '-' } },
      {
         title: 'FarmerCode', 
         dataIndex: 'supplierCode',
    
          render: (text: any, record: any) => { return record.supplierCode ? record.supplierCode : '-' } },
      {
         title: 'FarmType', 
         dataIndex: 'farm_type',
    
          render: (text: any, record: any) => { return record.farm_type ? record.farm_type : '-' } },
      {
         title: 'Place', 
         dataIndex: 'city', width: 500, 
          render: (text: any, record: any) => { return record.city ? record.city : '-' } },
      {
         title: 'District', 
         dataIndex: 'district',
    
          render: (text: any, record: any) => { return record.district ? record.district : '-' } },
      {
         title: 'State', 
         dataIndex: 'state',
    
          render: (text: any, record: any) => { return record.state ? record.state : '-' } },
      {
         title: 'ContactDetails', 
         dataIndex: 'contactNumber',
    
          render: (text: any, record: any) => { return record.contactNumber ? record.contactNumber : '-' } },
      {
         title: 'MPEDARegistrationStatus', 
         dataIndex: 'reg_status',
    
          render: (text: any, record: any) => { return record.reg_status ? 'Yes' : 'No' } },
      {
         title: 'MPEDARegistrationNo', 
         dataIndex: 'reg_no',
    
          render: (text: any, record: any) => { return record.reg_no ? record.reg_no : '-' } },
      {
         title: 'FarmName', 
         dataIndex: 'farmName',
    
          render: (text: any, record: any) => { return record.farmName ? record.farmName : '-' }
       },
      {
         title: 'FarmCode', 
         dataIndex: 'farmCode',
    
          render: (text: any, record: any) => { return record.farmCode ? record.farmCode : '-' }
       },
      {
         title: 'FarmAddress', 
         dataIndex: 'farmAddress',
    
          render: (text: any, record: any) => { return record.farmAddress ? record.farmAddress : '-' }
       },
      {
         title: 'NoOfAcres', 
         dataIndex: 'noOfAcr',
    
          render: (text: any, record: any) => { return record.noOfAcr ? record.noOfAcr : '-' }
       },
      {
         title: 'NoOfPonds', 
         dataIndex: 'noOfPonds',
    
          render: (text: any, record: any) => { return record.noOfPonds ? record.noOfPonds : '-' }
       },
      {
         title: 'TraceCode', 
         dataIndex: 'traceCode',
    
          render: (text: any, record: any) => { return record.traceCode ? record.traceCode : '-' }
       },
      {
         title: 'Certification', 
         dataIndex: 'certification',
    
          render: (text: any, record: any) => { return record.certification ? record.certification : '-' }
       },
      {
         title: 'CertificationCode', 
         dataIndex: 'certificationCode',
    
          render: (text: any, record: any) => { return record.certificationCode ? record.certificationCode : '-' }
       },
      {
         title: 'ExpiryDate', 
         dataIndex: 'expiryDate',
    
       },
      {
         title: 'CultureStatus', 
         dataIndex: 'cultureStatus',
    
          render: (text: any, record: any) => { return record.cultureStatus ? 'Yes' : 'No' }
       },
      {
         title: 'AreaUnderCultureInAcrs', 
         dataIndex: 'cultureInAcr',
    
          render: (text: any, record: any) => { return record.cultureInAcr ? record.cultureInAcr : '-' }
       },
      {
         title: 'DateOfStockIn', 
         dataIndex: 'dataOfStockIn',
    
          render: (text: any, record: any) => { return record.dataOfStockIn ? record.dataOfStockIn : '-' }
       },
      {
         title: 'QtyOfStockIn', 
         dataIndex: 'qtyStock',
    
          render: (text: any, record: any) => { return record.qtyStock ? record.qtyStock : '-' }
       },
      {
         title: 'DealerName', 
         dataIndex: 'dealer',
    
          render: (text: any, record: any) => { return record.dealer ? record.dealer : '-' }
       },
      {
         title: 'Feed', 
         dataIndex: 'feed',
    
          render: (text: any, record: any) => { return record.feed ? record.feed : '-' }
       },
      {
         title: 'Seed', 
         dataIndex: 'seed',
    
          render: (text: any, record: any) => { return record.seed ? record.seed : '-' }
       },
      {
         title: 'DOC', 
         dataIndex: 'doc',
    
          render: (text: any, record: any) => { return record.doc ? record.doc : '-' }
       },
      {
         title: 'Count', 
         dataIndex: 'count',
    
          render: (text: any, record: any) => { return record.count ? record.count : '-' }
       },
      {
         title: 'BiomassInMts', 
         dataIndex: 'biomass',
    
          render: (text: any, record: any) => { return record.biomass ? record.biomass : '-' }
       },
      {
         title: 'Remarks', 
         dataIndex: 'remarks',
    
          render: (text: any, record: any) => { return record.remarks ? record.remarks : '-' }
       },
      {
         title: 'Comments', 
         dataIndex: 'comments',
    
          render: (text: any, record: any) => { return record.comments ? record.comments : '-' }
       },
    
    ]
  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Farmers')
      .addColumns(exceldata)
      .saveAs('Farmers Data format.xlsx');
  }
  return(
      <Card title={<span style={{color:'white'}}>Farmer Excel Upload</span>} 
      size='small'
        style={{color:'white',textAlign:'center'}} 
        headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
      extra={<Link to='/farmers-view' >
      <Button className='panel_button'>View</Button>
      </Link>}
      >
          <Form>
          <Row gutter = {24}>
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
              <Form.Item label = "">
              <input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onChange={handleFileChange} />
              <label style={{color:'blue',whiteSpace: 'nowrap'}} >Only csv & excel files are allowed</label>
            </Form.Item>
              </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
          <Button type="primary"
           onClick={handleUpload} 
           loading={loading} disabled={!selectedFile}>Upload</Button>
        </Col>
          <Button
              type="default"
              style={{ color: "green" }}
              onClick={exportExcel}
              icon={<FileExcelFilled />}
          >
             Sample Format
          </Button>
          </Row>
          </Form>
      </Card>
  )


}

export default FarmersExcelUpload;