import { Button, Card, Col, Form, Row } from 'antd';
import { useState } from 'react';
import * as XLSX from 'xlsx';
import Papa from 'papaparse';

import { Link, useHistory } from 'react-router-dom';

import React from 'react';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Excel } from 'antd-table-saveas-excel';
import { FileExcelFilled } from '@ant-design/icons';
import { PayrollProcessServices } from '@gtpl/shared-services/hrms';

export const EarningsUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [form] = Form.useForm();
  const [data, setData] = useState();
  const [columns, setColumns] = useState([]);
  const [values, setValues] = useState([]);
  const service = new PayrollProcessServices();
  const [loading, setLoading] = useState(false);
  const [] = useState(null);
  const 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;
              }
              return row.reduce((acc, value, index) => {
                acc[header[index]] = value;
                return acc;
              }, {});
            })
            .filter((row) => row !== null);
        });
        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.earningsExcelUpload(data).then((res) => {
          setLoading(true);
          if (res.status) {
            AlertMessages.getSuccessMessage(res.internalMessage);
            history.push('/earnings-view');
          } else {
            AlertMessages.getErrorMessage(res.internalMessage);
          }
        });
      });
    } catch (error) {
      AlertMessages.getErrorMessage(error.message);
    }
  };

  const exceldata = [
    {
      title: 'Employee Code ',
      dataIndex: 'employeeCode',
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },
    },
    {
        title: 'Earnings',
        dataIndex: 'earnings',
        render: (text: any, record: any) => {
          return record.earnings ? record.earnings : '-';
        },
      },
  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Earnings Upload Excel')
      .addColumns(exceldata)
      .saveAs('Earnings_Upload.xlsx');
  };

  return (
    <Card
      title="Earnings Upload "
      extra={
        <Link to="/earnings-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 />}
          >
            Sample Format
          </Button>
        </Row>
      </Form>
    </Card>
  );
};

export default EarningsUpload;