import { EditOutlined } from '@ant-design/icons';
import { Button, Card, Input, Modal, Table } from 'antd'
import React, { useEffect, useRef, useState } from 'react';
import EmployeePayrollCompForm from './employee-payroll-component-form';
import { PayrollProcessServices } from '@gtpl/shared-services/hrms';
import { SearchOutlined, UndoOutlined } from '@ant-design/icons';
import { FilterConfirmProps } from 'antd/es/table/interface';
import Highlighter from "react-highlight-words";




export const EmployeePayrollComponent = () => {
    const [payrollCompData, setPayrollCompData] = useState([]);
    const [openModal, setOpenModal] = useState <boolean>(false);
    const [selectedRecord, setSelectedRecord] = useState(null);
    const service = new PayrollProcessServices();
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState('');
const [searchedColumn, setSearchedColumn] = useState('');




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

    const getEmployeePayrollCompData = () => {
        service.getPayrollComponentsData().then(res => {
            if (res.status) {
                setPayrollCompData(res.data);
            } else {
                setPayrollCompData([]);
            }
        }).catch((error) => {
            console.log(error.message);
        });
    };

    const handleEditClick = (record) => {
        setSelectedRecord(record);
        setOpenModal(true);
    };

    const handleCloseModal = () => {
        setOpenModal(false);
        setSelectedRecord(null);
    };


    const handleSearch = (
        selectedKeys: string[],
        confirm: (param?: FilterConfirmProps) => void,
        dataIndex: string,
    ) => {
        confirm();
        setSearchText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
    };

    const handleReset = (clearFilters: () => void) => {
        clearFilters();
        setSearchText('');
    };

    const getColumnSearchProps = (dataIndex: string) => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
          <div style={{ padding: 8 }}>
            <Input
              ref={searchInput}
              placeholder={`Search ${dataIndex}`}
              value={selectedKeys[0]}
              onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Button
              type="primary"
              onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90, marginRight: 8 }}
            >
              Search
            </Button>
            <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
              Reset
            </Button>
          </div>
        ),
        filterIcon: filtered => (
          <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
        onFilter: (value, record) =>
          record[dataIndex]
            ? record[dataIndex]
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase())
            : false,
        onFilterDropdownVisibleChange: visible => {
          if (visible) { setTimeout(() => searchInput.current.select()); }
        },
        render: text =>
          text ? (
            searchedColumn === dataIndex ? (
              <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[searchText]}
                autoEscape
                textToHighlight={text.toString()}
              />
            ) : text
          )
            : null
    
      });

    const payrollCompColumns:any = [
        {
            title: 'S.No',
            key: 'sno',
            fixed: 'left',
            width: 60,
            render: (text, record, index) => {
                return index + 1;
            }
        },
        {
            title: 'Employee Name',
            dataIndex: 'employeeName',
            key: 'employeeName',
            fixed: 'left',
            width: '160px',
            ...getColumnSearchProps('employeeName')
        },
        {
            title: 'Employee Code',
            dataIndex: 'employeeCode',
            key: 'employeeCode',
            fixed: 'left',
            width: '160px',
            ...getColumnSearchProps('employeeCode')
        },
        {
            title: 'Designation',
            dataIndex: 'designation',
            key: 'designation',
            fixed: 'left',
            width: '160px',
            ...getColumnSearchProps('designation')
        },
        {
            title: 'Department',
            dataIndex: 'departmentName',
            key: 'departmentName',
            fixed: 'left',
            width: '160px',
            ...getColumnSearchProps('departmentName')
        },
        {
            title: 'Type',
            dataIndex: 'employeeType',
            key: 'employeeType',
            fixed: 'left',
            width: '160px',
            ...getColumnSearchProps('employeeType')
        },
        {
            title: 'Basic',
            dataIndex: 'basic',
            key: 'basic',
            width: '80px'
        },
        {
            title: 'TA Amount',
            dataIndex: 'taAmount',
            key: 'taAmount',
            width: '100px'
        },
        {
            title: 'Hra Amount',
            dataIndex: 'hraAmount',
            key: 'hraAmount',
            width: '100px'
        },
        {
            title: 'EDU Amount',
            dataIndex: 'eduAmount',
            key: 'eduAmount',
            width: '100px'
        },
        {
            title: 'Medical Amount',
            dataIndex: 'medicalAmount',
            key: 'medicalAmount',
            width: '120px'
        },
        {
            title: 'Spl Amount',
            dataIndex: 'splAmount',
            key: 'splAmount',
            width: '100px'
        },
        {
            title: 'Conveyance Amount',
            dataIndex: 'conveyanceAmount',
            key: 'conveyanceAmount',
            width: '150px'
        },
        {
            title: 'Petrol Amount',
            dataIndex: 'petrolAmount',
            key: 'petrolAmount',
            width: '120px'
        },
        {
            title: 'Shoe Amount',
            dataIndex: 'shoeAmount',
            key: 'shoeAmount',
            width: '100px'
        },
        {
            title: 'Washing Amount',
            dataIndex: 'washingAmount',
            key: 'washingAmount',
            width: '120px'
        },
        {
            title: 'Uniform Amount',
            dataIndex: 'uniformAmount',
            key: 'uniformAmount',
            width: '120px'
        },
        {
            title: 'Helper Amount',
            dataIndex: 'helperAmount',
            key: 'helperAmount',
            width: '120px'
        },
        {
            title: 'Production Amount',
            dataIndex: 'productionAmount',
            key: 'productionAmount',
            width: '150px'
        },
        {
            title: 'Bonus Amount',
            dataIndex: 'bonusAmount',
            key: 'bonusAmount',
            width: '120px'
        },
        {
            title: 'Mess Amount',
            dataIndex: 'messAmount',
            key: 'messAmount',
            width: '100px'
        },
        {
            title: 'Others Amount',
            dataIndex: 'othersAmount',
            key: 'othersAmount',
            width: '120px'
        },
        {
            title: 'Actions',
            key: 'actions',
            fixed: 'right',
            width: '100px',
            render: (text, record, index) => {
                return (
                    <EditOutlined
                        style={{ fontSize: '15px',color: '#1890ff' }}
                        onClick={() => handleEditClick(record)}
                        
                    />
                );
            }
        }
    ];

    return (
        <div>
            <Card title={<span style={{ color: 'white', fontSize: 18 }}>Employee Payroll Components</span>}
                style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#45c8f6', border: 0, paddingTop: "1%", paddingBottom: "1%" }}>
                <Table 
                    columns={payrollCompColumns}
                    dataSource={payrollCompData}
                    bordered
                    pagination={false}
                    scroll={{ x: 1000,y:600 }}
                />
                <Modal
                    visible={openModal}
                    onCancel={handleCloseModal}
                    footer={null}
                    width='600px'
                >
                    <EmployeePayrollCompForm record={selectedRecord} getEmployeePayrollCompData={getEmployeePayrollCompData} />
                </Modal>
            </Card>
        </div>
    );
};

export default EmployeePayrollComponent;