import React, { useState } from 'react';
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 {PackingMaterialPriceService} from '../../../../../../shared-services/masters/src/lib/packing-material-prices-service'

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

export function PackingMaterialPricesForm(
  props: PackingMaterialPricesProps
) {

  const [selectedFile, setSelectedFile] = useState(null);
  const [form] = Form.useForm();
  const [data, setData] = useState()
  const [columns, setColumns] = useState([]);
  const [values, setValues] = useState([])
  const service = new PackingMaterialPriceService()
  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);
  // };
  

    

    const handleUpload = async() => {
      try{
          form.validateFields().then(async () => {
              const res = await service.createPackingMaterialPrices(data).then(res => {
                  setLoading(true);
                  if(res.status){
                      AlertMessages.getSuccessMessage(res.internalMessage)
                      setLoading(false)
                       history.push("/packing-material-prices-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
        },
        width: 60, 
       
      }, 
      { title: 'Product', dataIndex: 'product',width: 100,render:(text:any,record:any) => {return record.product ? record.product : '-'} },  
      { title: 'PackStyle', dataIndex: 'packStyle',width: 100,render:(text:any,record:any) => {return record.packStyle ? record.packStyle : '-'} },
      // { title: 'Category', dataIndex: 'category',width: 500,render:(text:any,record:any) => {return record.category ? record.category : '-'} },     
      { title: 'Price ', dataIndex: 'price',width: 100,render:(text:any,record:any) => {return record.price ? record.price : '-'} },
      

  ]
  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Packing material Prices Excel')
      .addColumns(exceldata)
      .saveAs('Packing material Prices format.xlsx');
  }
  return(
      <Card title={<span style={{color:'white'}}>Packing Material Prices</span>} 
      size='small'
        style={{color:'white',textAlign:'center'}} 
        headStyle={{ backgroundColor: "#69c0ff", border: 0 }}
      extra={<Link to='/packing-material-prices-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 PackingMaterialPricesForm;