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 { Excel } from 'antd-table-saveas-excel';
import dayjs from "dayjs";
import { PayrollProcessServices } from "@gtpl/shared-services/hrms";

import './pages-payroll-reports.css';
import { PayRollRequest } from '@gtpl/shared-models/hrms';
import { title } from 'process';
import { IExcelColumn } from 'antd-table-saveas-excel/app';
import { employeeIdRequest } from '@gtpl/shared-models/gtpl';
import moment from 'moment';
import { configConsumerProps } from 'antd/lib/config-provider';

/* eslint-disable-next-line */


export function EmployeePayTransactionReports() {
    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 [employee, setEmployeeName] = useState<any[]>([]);
    const service = new PayrollProcessServices()
    const [departmentMapping, setDepartmentMapping] = useState<any[]>([]);

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

    const getAllEmployeeEmployeeName = () => {
        service.getEmpInTransaction().then((res) => {
            if (res.status) {
                console.log(res.data)
                setEmployeeName(res.data.data);
                AlertMessages.getSuccessMessage("Data Retrieved Successfully")
            }
        }).catch((error) => {
            AlertMessages.getErrorMessage('Error fetching data: ' + error.message);
        });
    };


    const getPayrollAllData = () => {
        const req = new employeeIdRequest();
        req.employeeId = form.getFieldValue('employeeName');

        service.getEmpTransactionReport(req).then((res) => {
            if (res.status) {
                setData(res.data.data);
                AlertMessages.getSuccessMessage("Data Retrived Sucessfully")
            }
        })
            .catch((error) => {
                AlertMessages.getErrorMessage('Error fetching data: ' + error.message);
            });
    };

    console.log(data)


    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 Number',
            dataIndex: 'employeeCode',
            render: (text: any, record: any) => {
                return record.employeeCode ? record.employeeCode : '-';
            },

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

        },
        {
            title: 'Transaction Name',
            dataIndex: 'transactionName',
            render: (text: any, record: any) => {
                return record.transactionName ? record.transactionName : '-';
            },
        },
        {
            title: 'Type',
            dataIndex: 'type',
            render: (text: any, record: any) => {
                return record.type ? record.type : '-';
            },
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            render: (text: any, record: any) => {
                return record.amount ? record.amount : '-';
            },
        },
        {
            title: 'Created Date',
            dataIndex: 'createdDate',
            render: (text, record) => {
                return <span>
                    {record.createdDate ? moment(record.createdDate).format('YYYY-MM-DD') : '-'}
                </span>
            },
        },

        {
            title: 'Created By',
            dataIndex: 'createdUser',
            render: (text: any, record: any) => {
                return record.createdUser ? record.createdUser : '-';
            },
        },
    ]

    //let i = 1;
    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: 'Transaction Name',
            dataIndex: 'transactionName',
            render: (text: any, record: any) => {
                return record.transactionName ? record.transactionName : '-';
            },
        },
        {
            title: 'Type',
            dataIndex: 'type',
            render: (text: any, record: any) => {
                return record.type ? record.type : '-';
            },
            // ...configConsumerProps("type")
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            render: (text: any, record: any) => {
                return record.amount ? record.amount : '-';
            },
        },
        {
            title: 'Created Date',
            dataIndex: 'createdDate',
            render: (text, record) => {
                return <span>
                    {record.createdDate ? moment(record.createdDate).format('YYYY-MM-DD') : '-'}
                </span>
            },
        },

        {
            title: 'Created By',
            dataIndex: 'createdUser',
            render: (text: any, record: any) => {
                return record.createdUser ? record.createdUser : '-';
            },
        },



    ]

    const exportExcel = () => {
        const excel = new Excel();
        excel
            .addSheet('Employee Report Excel')
            .addColumns(exceldata)
            .addDataSource(data, { str2num: true })
            .saveAs('emp-Report-hrs.xlsx');
    };


    return (
        <Card
            title={<span style={{ color: 'white' }}>Employee Transaction Report</span>}
            extra={<Button onClick={exportExcel}>Get Excel</Button>}
            style={{ textAlign: 'center' }}
            headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        >
            <Form form={form} layout="horizontal" onFinish={getPayrollAllData}>
                <Row gutter={24}>


                    <Col xs={24} sm={24} md={6} lg={8} xl={8}>
                        <Form.Item label="Employee Name" name="employeeName" rules={[{ required: false, message: 'Please Select Employee' }]}>
                            <Select
                                placeholder="Select an Employee"
                                showSearch                   
                                optionFilterProp="children"   
                                filterOption={(input, option) =>
                                    (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
                                }
                            >
                                {employee.map((employee) => (
                                    <Option key={employee.employee_id} value={employee.employee_id}>
                                        {`${employee.employeeName} - ${employee.employeeCode}`}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item>
                    </Col>

                    <Col xs={24} sm={24} md={6} lg={6} xl={3}>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Col>

                    <Col xs={24} sm={24} md={6} lg={6} xl={1}>
                        <Form.Item>
                            <Button type="primary" htmlType="reset" onClick={onReset}>
                                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 EmployeePayTransactionReports;