import { Button, Card, Col, DatePicker, Form, message, Row, Select, Table, TableColumnsType } from 'antd';
import React, { Children, useEffect, useState } from 'react';
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import moment from 'moment';
import dayjs from "dayjs";
import { PayrollProcessServices } from "@gtpl/shared-services/hrms";
import { PayRollRequest } from '@gtpl/shared-models/hrms';

import './pages-payroll-reports.css';
import { Excel } from 'antd-table-saveas-excel';
import { IExcelColumn } from 'antd-table-saveas-excel/app';

/* eslint-disable-next-line */


export function PayrollNmrReports() {
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const [form] = Form.useForm();
  const [data, setData] = useState<any[]>([]);
  const { Option } = Select;
  const [employeeName, setEmployeeName] = useState<any[]>([]);
  const service = new PayrollProcessServices()
  const [departmentMapping, setDepartmentMapping] = useState<any[]>([]);

  useEffect(() => {
    getAllNMREmployeeNamePayrollLogs();
  }, []);

  const getAllNMREmployeeNamePayrollLogs = () => {
    service.getAllNMREmployeeNamePayrollLogs().then((res) => {
      if (res.status) {
        setEmployeeName(res.data);
        const deptMap = res.data.map(emp => ({
          department: emp.department,
          dept_name: emp.dept_name
        }));
        setDepartmentMapping(deptMap);
      }
    });
  };


  const getPayrollAllData = () => {
    const PayrollMonth = form.getFieldValue('PayrollMonth');
    const department = form.getFieldValue('department');
    const employeeName = form.getFieldValue('employeeName');
    const req = new PayRollRequest(null, dayjs(PayrollMonth).startOf('month').format('YYYYMM'), department, employeeName);

    service.getPayrollAllData(req).then((res) => {
      const dataWithDeptName = res.data.map(item => ({
        ...item,
        dept_name: departmentMapping.find(dept => dept.department === item.department)?.dept_name || '-'
      }));
      setData(dataWithDeptName);
      AlertMessages.getSuccessMessage("Data Retrived Sucessfully")
    })
      .catch((error) => {
        AlertMessages.getErrorMessage('Error fetching data: ' + error.message);
      });
  };


  const onReset = () => {
    form.resetFields();
    setData(null)
  };

  const columns: TableColumnsType<any> = [
    {
      title: 'S No',
      key: 'sNo',
      responsive: ['sm'],
      width: 70,
      fixed: "left",
      render: (text, object, index) => (page - 1) * pageSize + (index + 1),
    },

    {
      title: 'Employee Names',
      dataIndex: 'employeeName',
      render: (text: any, record: any) => {
        return record.employeeName ? record.employeeName : '-';
      },

    },
    {
      title: 'Employee Number',
      dataIndex: 'employeeCode',
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },

    },
    {
      title: 'Function',
      dataIndex: 'department',
      render: (text: any, record: any) => {
        return record.dept_name ? record.dept_name : '-';
      },
    },
    {
      title: 'Factory Working Days',
      dataIndex: 'factoryWorkingDays',
      render: (text: any, record: any) => {
        return record.factoryWorkingDays ? record.factoryWorkingDays : '-';
      },
    },
    {
      title: 'Attendance',
      dataIndex: 'attendance',
      render: (text: any, record: any) => {
        return record.attendance ? record.attendance : '-';
      },
    },
    {
      title: 'Incentive Hours',
      dataIndex: 'totalIncentiveHr',
      render: (text: any, record: any) => {
        return record.totalIncentiveHr ? record.totalIncentiveHr : '-';
      },
    },

    {
      title:'Calculated Earnings',
      children:[
        {
          title: 'Basic Salary',
          dataIndex: 'calBasic',
          render: (text: any, record: any) => {
            return record.calBasic ? record.calBasic : '-';
          },
        },
        {
          title: 'Uniform Allowance',
          dataIndex: 'calUniform',
          render: (text: any, record: any) => {
            return record.calUniform ? record.calUniform : '-';
          },
        },
        {
          title: 'Special Allowance',
          dataIndex: 'calSpl',
          render: (text: any, record: any) => {
            return record.calSpl ? record.calSpl : '-';
          },
        },
        {
          title: 'Washing Allowance',
          dataIndex: 'calWashing',
          render: (text: any, record: any) => {
            return record.calWashing ? record.calWashing : '-';
          },
        },
        {
          title: 'Shoe Allowance',
          dataIndex: 'calShoe',
          render: (text: any, record: any) => {
            return record.calShoe ? record.calShoe : '-';
          },
        },
        {
          title: 'Other Earnings',
          dataIndex: 'otherEarnings',
          render: (text: any, record: any) => {
            return record.otherEarnings ? record.otherEarnings : '-';
          },
        },
        {
          title: 'Gross Earnings',
          dataIndex: 'calGross',
          render: (text: any, record: any) => {
            return record.calGross ? record.calGross : '-';
          },
        },
        {
          title: 'Incentive',
          dataIndex: 'incentiveAmount',
          render: (text: any, record: any) => {
            return record.incentiveAmount ? record.incentiveAmount : '-';
          },
        },
       
    
      ]
    },
    {
      title: 'Total Earnings',
      dataIndex: 'totalEarnings',
      render: (text: any, record: any) => {
        return record.totalEarnings ? record.totalEarnings : '-';
      },
    },

    {
      title:'Deductions',
      children:[ {
        title: 'EPF @ 12%',
        dataIndex: 'epfAmount',
        render: (text: any, record: any) => {
          return record.epfAmount ? record.epfAmount : '-';
        },
      },
  
      {
        title: 'ESIC @ 0.75%',
        dataIndex: 'esicAmount',
        render: (text: any, record: any) => {
          return record.esicAmount ? record.esicAmount : '-';
        },
      },
  
      {
        title: 'Mess Deductions',
        dataIndex: 'messAmount',
        render: (text: any, record: any) => {
          return record.messAmount ? record.messAmount : '-';
        },
      },
  
      {
        title: 'Professional Tax',
        dataIndex: 'ProfessionalTax',
        render: (text: any, record: any) => {
          return record.messAmount ? record.messAmount : '-';
        },
      },
  
      {
        title: 'Other Deductions',
        dataIndex: 'othersAmount',
        render: (text: any, record: any) => {
          return record.othersAmount ? record.othersAmount : '-';
        },
      },
  
      {
        title: 'Total Deductions',
        dataIndex: 'totalDeductions',
        render: (text: any, record: any) => {
          return record.totalDeductions ? record.totalDeductions : '-';
        },
      },
  ]
    },

    {
      title: 'Net Amount',
      dataIndex: 'netSalary',
      render: (text: any, record: any) => {
        return record.netSalary ? record.netSalary : '-';
      },
    },
  ]

  const exceldata: IExcelColumn[] = [
    {
      title: 'S No',
      dataIndex: 'sNo',
      render: (text, object, index) => (page - 1) * pageSize + (index + 1),
    },
    {
      title: 'Employee Names',
      dataIndex: 'employeeName',
      render: (text: any, record: any) => {
        return record.employeeName ? record.employeeName : '-';
      },
    },
    {
      title: 'Employee Number',
      dataIndex: 'employeeCode',
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },
    },
    {
      title: 'Function',
      dataIndex: 'department',
      render: (text: any, record: any) => {
        return record.dept_name ? record.dept_name : '-';
      },
    },
    {
      title: 'Factory Working Days',
      dataIndex: 'factoryWorkingDays',
      render: (text: any, record: any) => {
        return record.factoryWorkingDays ? record.factoryWorkingDays : '-';
      },
    },
    {
      title: 'Attendance',
      dataIndex: 'attendance',
      render: (text: any, record: any) => {
        return record.attendance ? record.attendance : '-';
      },
    },
    {
      title: 'Incentive Hours',
      dataIndex: 'totalIncentiveHr',
      render: (text: any, record: any) => {
        return record.totalIncentiveHr ? record.totalIncentiveHr : '-';
      },
    },
    {
      title: 'Calculated Earnings',
      dataIndex:'',
      children: [
        {
          title: 'Basic Salary',
          dataIndex: 'calBasic',
          render: (text: any, record: any) => {
            return record.calBasic ? record.calBasic : '-';
          },
        },
        {
          title: 'Uniform Allowance',
          dataIndex: 'calUniform',
          render: (text: any, record: any) => {
            return record.calUniform ? record.calUniform : '-';
          },
        },
        {
          title: 'Special Allowance',
          dataIndex: 'calSpl',
          render: (text: any, record: any) => {
            return record.calSpl ? record.calSpl : '-';
          },
        },
        {
          title: 'Washing Allowance',
          dataIndex: 'calWashing',
          render: (text: any, record: any) => {
            return record.calWashing ? record.calWashing : '-';
          },
        },
        {
          title: 'Shoe Allowance',
          dataIndex: 'calShoe',
          render: (text: any, record: any) => {
            return record.calShoe ? record.calShoe : '-';
          },
        },
        {
          title: 'Other Earnings',
          dataIndex: 'otherEarnings',
          render: (text: any, record: any) => {
            return record.otherEarnings ? record.otherEarnings : '-';
          },
        },
        {
          title: 'Gross Earnings',
          dataIndex: 'calGross',
          render: (text: any, record: any) => {
            return record.calGross ? record.calGross : '-';
          },
        },
        {
          title: 'Incentive',
          dataIndex: 'incentiveAmount',
          render: (text: any, record: any) => {
            return record.incentiveAmount ? record.incentiveAmount : '-';
          },
        },
      ]
    },
    {
      title: 'Total Earnings',
      dataIndex: 'totalEarnings',
      render: (text: any, record: any) => {
        return record.totalEarnings ? record.totalEarnings : '-';
      },
    },
    {
      title: 'Deductions',
      dataIndex:'',
      children: [
        {
          title: 'EPF @ 12%',
          dataIndex: 'epfAmount',
          render: (text: any, record: any) => {
            return record.epfAmount ? record.epfAmount : '-';
          },
        },
        {
          title: 'ESIC @ 0.75%',
          dataIndex: 'esicAmount',
          render: (text: any, record: any) => {
            return record.esicAmount ? record.esicAmount : '-';
          },
        },
        {
          title: 'Mess Deductions',
          dataIndex: 'messAmount',
          render: (text: any, record: any) => {
            return record.messAmount ? record.messAmount : '-';
          },
        },
        {
          title: 'Professional Tax',
          dataIndex: 'ProfessionalTax',
          render: (text: any, record: any) => {
            return record.ProfessionalTax ? record.ProfessionalTax : '-';
          },
        },
        {
          title: 'Other Deductions',
          dataIndex: 'othersAmount',
          render: (text: any, record: any) => {
            return record.othersAmount ? record.othersAmount : '-';
          },
        },
        {
          title: 'Total Deductions',
          dataIndex: 'totalDeductions',
          render: (text: any, record: any) => {
            return record.totalDeductions ? record.totalDeductions : '-';
          },
        },
      ]
    },
    {
      title: 'Net Amount',
      dataIndex: 'netSalary',
      render: (text: any, record: any) => {
        return record.netSalary ? record.netSalary : '-';
      },
    },
  ];
  
  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('NMR Report Excel')
      .addColumns(exceldata)
      .addDataSource(data, { str2num: true })
      .saveAs('nmr-Report-hrs.xlsx');
  };
  


  return (
    <Card
      title={<span style={{ color: 'white' }}>NMR Report</span>}
      extra={<Button onClick={exportExcel}>Get Excel</Button>}
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      <Form form={form} layout="vertical" onFinish={getPayrollAllData}>
        <Row gutter={24}>
          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item label="Payroll Month" name="PayrollMonth" rules={[{ required: true, message: 'Please Select Department' }]}>
              <DatePicker style={{ width: '100%' }} picker="month" placeholder='Select Month'/>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item label="Department" name="department" rules={[{ required: false, message: 'Please Select Department' }]}>
              <Select placeholder="Select Department">
                {employeeName.map((index) => {
                  return (
                    <Option key={index.id} value={index.department}>
                      {index.dept_name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item label="Employee Name" name="employeeName" rules={[{ required: false, message: 'Please Select Employee' }]}>
              <Select placeholder="Select Employee Name">
                {employeeName.map((index) => {
                  return (
                    <Option value={index.employee_name}>
                      {index.employee_name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={3}>
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{marginTop:"30px"}}>
                Get Report
              </Button>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={1}>
            <Form.Item>
              <Button type="primary" htmlType="reset" onClick={onReset} style={{marginTop:"30px"}}>
                Reset
              </Button>
            </Form.Item>
          </Col>
        </Row>
        <Table
          className="custom-table-wrapper"
          scroll={{ x: 3000, y: 1100 }}
          columns={columns}
          dataSource={data}
          size="small"
          pagination={{
            pageSize: 10,
            onChange(current, pageSize) {
              setPage(current);
              setPageSize(pageSize);
            },
          }}
        />
      </Form>
    </Card>
  );
}

export default PayrollNmrReports;