import { EditOutlined } from '@ant-design/icons';
import { Button, Card, Input, Modal, Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
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';
import { Link } from 'react-router-dom';

export const TdsView = () => {
  const [payrollCompData, setPayrollCompData] = useState([]);
  const service = new PayrollProcessServices();
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

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

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

  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',
      width: '160px',
      ...getColumnSearchProps('employeeName'),
    },
    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      key: 'employeeCode',
      width: '160px',
      ...getColumnSearchProps('employeeCode'),
    },
    {
      title: 'Designation',
      dataIndex: 'designation',
      key: 'designation',
      width: '160px',
      ...getColumnSearchProps('designation'),
    },
    {
      title: 'Department',
      dataIndex: 'departmentName',
      key: 'departmentName',
      width: '160px',
      ...getColumnSearchProps('departmentName'),
    },
    {
      title: 'Type',
      dataIndex: 'employeeType',
      key: 'employeeType',
      width: '160px',
      ...getColumnSearchProps('employeeType'),
    },
    {
      title: 'TDS',
      dataIndex: 'tds',
      key: 'tds',
      width: '100px',
    },
  ];

  return (
    <div>
      <Card
        title={<span style={{ color: 'white', fontSize: 18 }}>TDS</span>}
        extra={
          <Link to="/tds-upload">
            <span style={{ color: 'white' }}>
              <Button type={'primary'}>Create</Button>{' '}
            </span>
          </Link>
        }
        style={{ textAlign: 'center' }}
        headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
      >
        <Table
          columns={payrollCompColumns}
          dataSource={payrollCompData}
          bordered
          pagination={false}
          scroll={{ x: 1000, y: 600 }}
        />
      </Card>
    </div>
  );
};

export default TdsView;