import { Button, Card, Col, Form, Modal, Row, Tag } 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 { ApplyForLeavesService } from '@gtpl/shared-services/hrms';
import { ApplyForLeavesModelDtoReq, ApplyForOdCoModelDtoReq } from '@gtpl/shared-models/hrms';
import { IExcelColumn } from 'antd-table-saveas-excel/app';
import moment from 'moment';

export const ApplyForOdCoForm = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [form] = Form.useForm();
  const [data, setData] = useState();
  const [columns, setColumns] = useState([]);
  const [values, setValues] = useState([]);
  const service = new ApplyForLeavesService();
  const [loading, setLoading] = useState(false);
  const [] = useState(null);
  const history = useHistory();
  const [errorModalVisible, setErrorModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string[]>([]);

  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);
        });
        output[0].forEach((date1) => {
          const fromDate = date1["From Date"];
          const momentFromDate = moment(fromDate, 'DD-MM-YYYY', true); // true to enforce strict parsing
          if (!momentFromDate.isValid()) {
            alert('Invalid date format for From Date. Please use DD-MM-YYYY format.');
            return;
          }
          date1["From Date"] = momentFromDate.add(1, 'day').format('YYYY-MM-DD');

          const toDate = date1["To Date"];
          const momentToDate = moment(toDate, 'DD-MM-YYYY', true); // true to enforce strict parsing
          if (!momentToDate.isValid()) {
            alert('Invalid date format for To Date. Please use DD-MM-YYYY format.');
            return;
          }
          date1["To Date"] = momentToDate.add(1, 'day').format('YYYY-MM-DD');
        });
        setData(output[0]);
      };
    } else {
      alert('Please select a valid .csv file.');
      setSelectedFile(null);
    }
  };
  let createdUser = "";
  // if(!props.isUpdate){
  createdUser = localStorage.getItem("createdUser");
  // }
  const handleUpload = async () => {
    try {
      form.validateFields().then(async () => {
        const req = new ApplyForOdCoModelDtoReq(data, createdUser);
        await service.createOdCo(req).then((res) => {
          setLoading(true);
          if (res[0].status) {
            AlertMessages.getSuccessMessage(res[0].internalMessage);
            history.push('/apply-for-od-co-grid');
          } else {
            console.log(res[0].internalMessage, 'failed');
            const messages = [...errorMessage];
            res.forEach((rec) => {
              messages.push(rec.internalMessage)
            })
            setErrorMessage(messages); // Set error message
            setErrorModalVisible(true); // Show error modal
          }
        });
      });
    } catch (error) {
      setErrorMessage(error.message); // Set error message
      setErrorModalVisible(true); // Show error modal
      console.error(error);
    }
  };
  const sampleHolidays = [
    {
      employeeCode: "Emp Code",
      // employeeName: 'Emp Name',
      type: "OD/CO",
      fromDate: "2024-05-15",
      toDate: "2024-05-17",
      noOfDays: "3",
      reason: "example reason",
    //   leaveAddress: "Address"

    },

    // Add more holiday entries as needed
  ];

  // Pass sample data to exportingColumns
  let exportingColumns: IExcelColumn[] = [
    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      __cellType__: "TypeString",
      render: (text, record) => record.employeeCode ? record.employeeCode : '-'
    },
    // {
    //   title: 'Employee Name',
    //   dataIndex: 'employeeName',
    //   __cellType__: "TypeString",
    //   render: (text, record) => record.employeeName ? record.employeeName : '-'
    // },
    {
      title: 'Type',
      dataIndex: 'type',
      __cellType__: "TypeString",
      render: (text, record) => record.type ? record.type : '-'
    },
    {
      title: 'From Date',
      dataIndex: 'fromDate',
      // __cellType__: "TypeDate",
      render: (text, record) => record.fromDate ? record.fromDate : '-'
    },
    {
      title: 'To Date',
      dataIndex: 'toDate',
      // __cellType__: "TypeDate",
      render: (text, record) => record.toDate ? record.toDate : '-'
    },
    {
      title: 'No Of Days',
      dataIndex: 'noOfDays',
      __cellType__: "TypeString",
      render: (text, record) => record.noOfDays ? record.noOfDays : '-'
    },
    {
      title: 'Reason',
      dataIndex: 'reason',
      __cellType__: "TypeString",
      render: (text, record) => record.reason ? record.reason : '-'
    },
    // {
    //   title: 'Leave Address',
    //   dataIndex: 'leaveAddress',
    //   __cellType__: "TypeString",
    //   render: (text, record) => record.leaveAddress ? record.leaveAddress : '-'
    // },

  ];

  // Now you can pass sampleHolidays to your Excel export function
  const handleExport = (e: any) => {
    e.preventDefault();

    const currentDate = new Date()
      .toISOString()
      .slice(0, 10)
      .split("-")
      .join("/");

    const excel = new Excel();
    excel.addSheet("Sheet1");
    excel.addColumns(exportingColumns);
    excel.addDataSource(sampleHolidays, { str2num: false });
    excel.saveAs(`apply-OD-CO-${currentDate}.xlsx`);
  }

  return (
    <Card
      title="Apply OD/CO"
      extra={  <>
       {/* <Link to="/apply-manual-leaves">
          <span style={{ color: 'white' }}>
            <Button type={'primary'}>Manual Form</Button>{' '}
          </span>
        </Link> */}
           <Link to="/apply-for-od-co-grid">
          <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={handleExport}
            icon={<FileExcelFilled />}
          >
            Sample Format
          </Button>
        </Row>
      </Form>
      <Modal
      width={605}
        title="warning"
        visible={errorModalVisible}
        onCancel={() => setErrorModalVisible(false)}
        footer={[
          <Button key="back" onClick={() =>{ setErrorModalVisible(false);setLoading(false)}}>
            OK
          </Button>,
        ]}
      >
        {errorMessage.map((rec) => {
          return <Tag color="warning">{rec}</Tag>
        })}
      </Modal>
    </Card>
  );
};

export default ApplyForOdCoForm;