import { Button, Card, Col, Form, Row } from 'antd';
import Papa from 'papaparse';
import { useState } from 'react';
import * as XLSX from 'xlsx';
import { Link, useHistory } from 'react-router-dom';
import { FileExcelFilled } from '@ant-design/icons';
import { PayrollProcessServices } from '@gtpl/shared-services/hrms';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Excel } from 'antd-table-saveas-excel';
import React from 'react';

export const TdsUpload = () => {
  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);
        });
        console.log(output,'00000000000')
        setData(output[0]);
      };
    } else {
      alert('Please select a valid .csv or.xlsx file.');
      setSelectedFile(null);
    }
  };

  const handleUpload = async () => {
    try {
      form.validateFields().then(async () => {
        const res = await service.tdsExcelUpload(data);
        
        if (res.status) {
          if(res.data.status == true){
            setLoading(true);
            console.log(res.data)
            AlertMessages.getSuccessMessage(res.data.internalMessage);
            history.push('/tds-view');
          }else{
            AlertMessages.getErrorMessage(res.data.internalMessage);
          }

        } else {
          AlertMessages.getErrorMessage(res.data.internalMessage);
        }
      });
    } catch (error) {
      AlertMessages.getErrorMessage(error.message);
    }
  };

  
  const excelData = [
    {
      title: 'Employee Code ',
      dataIndex: 'employeeCode'
    },
    {
      title: 'TDS',
      dataIndex: 'tds'
    },
  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('TDS')
      .addColumns(excelData)
      .saveAs('TDS_Upload.xlsx');
  };

  return (
    <Card
      title="TDS Upload"
      extra={
        <Link to="/tds-view">
          <span style={{ color: 'white' }}>
            <Button type={'primary'}>View</Button>{' '}
          </span>
        </Link>
      }
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 6 }}
            lg={{ span: 6 }}
            xl={{ span: 6 }}
          >
            <Form.Item label="Upload Excel">
              <input
                placeholder="Upload Excel"
                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: 18 }}
            lg={{ span: 18 }}
            xl={{ span: 18 }}
            style={{ textAlign: 'right' }}
          >
            <Button
              type="default"
              style={{ color: 'green' }}
              onClick={exportExcel}
              icon={<FileExcelFilled />}
            >
              Sample Format
            </Button>
          </Col>
        </Row>

        <Row>
          <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>
        </Row>
      </Form>
    </Card>
  );
};

export default TdsUpload;