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 { FgInspectionSampleDto } from '@gtpl/shared-models/production-management';
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 {RmBudgetServices} from "libs/shared-services/masters/src"
import { useForm } from 'antd/lib/form/Form';

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

export function RmBudget(props: RmBudgetProps) {
  const [selectedFile, setSelectedFile] = useState(null);
  const [data, setData] = useState()
  const [columns, setColumns] = useState([]);
  const [values, setValues] = useState([])
  const service = new RmBudgetServices()
  const [loading, setLoading] = useState(false);
  const [jsonData, setJsonData] = useState(null);
  let history = useHistory();
  const [form ]= useForm()

  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 handleUpload = async() => {
      try{
          form.validateFields().then(async () => {
              const res = await service.createRmBudget(data).then(res => {
                  setLoading(true);
                  if(res.status){
                      AlertMessages.getSuccessMessage(res.internalMessage)
                      setLoading(false)
                       history.push("/rm-budget-view")

                  } else{
                    setLoading(false)
                      AlertMessages.getErrorMessage(res.internalMessage)
                    }
                  })
                })
      } catch (error) {
          AlertMessages.getErrorMessage(error.message);
        }
    }
    const exceldata = [
   
      { title: 'Month', dataIndex: 'month',width: 100,render:(text:any,record:any) => {return record.month ? record.month : '-'} },  
      { title: 'Year', dataIndex: 'year',width: 100,render:(text:any,record:any) => {return record.year ? record.year : '-'} },
      { title: 'Count', dataIndex: 'count',width: 500,render:(text:any,record:any) => {return record.count ? record.count : '-'} },     
      { title: 'ProcurementManager', dataIndex: 'procurementManager',width: 100,render:(text:any,record:any) => {return record.procurementManager ? record.procurementManager : '-'} },
      { title: 'Quantity', dataIndex: 'quantity',width: 100,render:(text:any,record:any) => {return record.quantity ? record.quantity : '-'} },
  ]
  
  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Rm Budget Excel')
      .addColumns(exceldata)
      .saveAs('Rm Budget format.xlsx');
  }
  return(
      <Card title='Rm Budget' 
      extra={<Link to='/rm-budget-view' >
      <span style={{color:'white'}} ><Button type={'primary'} >View</Button> </span>
      </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 />}
          >
              Download Excel
          </Button>
          </Row>
          </Form>
      </Card>
  )


}

export default RmBudget;