import { FileExcelFilled } from '@ant-design/icons';
import { Input, Button, Card, Table } from "antd";
import { Excel } from 'antd-table-saveas-excel';
import { ColumnProps } from 'antd/es/table';
import { EmployeeWeekOffUploadsServices } from 'libs/shared-services/hrms/src/lib/employee-week-off-uploads';
import { bankNamesServices } from 'libs/shared-services/masters/src/lib/vendor-banks.service';
import React, { useRef } from 'react';
import { useEffect, useState } from 'react';
import { render } from 'react-dom';
import { Link } from 'react-router-dom';
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

export const EmployeeWeekOffView = () => {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const service = new EmployeeWeekOffUploadsServices();
  const [data, setData] = useState<any[]>([]);
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

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

  const getInfo = () => {
    service.getEmployeeWeekOffUploads().then((res) => {
      if (res.status) {
        const filteredEmp = res.data.filter(employee => employee.employeeType === 'Salaried Form')
        setData(filteredEmp);
      } else {
        if (res.intlCode) {
          setData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setData([]);
      AlertMessages.getErrorMessage(err.message);
    });
  };

  function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };
  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  const getColumnSearchProps = dataIndex => ({
    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 columns: any[] = [
    {
      title: 'S No',
      key: 'sNo',
      responsive: ['sm'],
      render: (text, object, index) =>
        (page - 1) * pageSize + (index + 1) + pageSize * (page - 1),
    },
    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      render: (text, record) => record.employeeCode ? record.employeeCode : '-',
      ...getColumnSearchProps('employeeCode'),

    },
    {
      title: 'Employee Name',
      dataIndex: 'employeeName',
      render: (text, record) => record.employeeName ? record.employeeName : '-',
      ...getColumnSearchProps('employeeName'),

    },
    {
      title: 'Employee Type',
      dataIndex: 'employeeType',
      render: (text, record) => record.employeeType ? record.employeeType : '-'


    },
    // {
    //     title: 'Employee Category',
    //     dataIndex: 'employeeCategory',
    //   render: (text, record) => record.employeeCategory ? record.employeeCategory : '-'


    // },

    {
      title: 'Week-Off Day',
      dataIndex: 'weekOffDay',
      render: (text, record) => record.weekOffDay ? record.weekOffDay : '-',
      ...getColumnSearchProps('weekOffDay'),

    },


  ];

  let i = 1;
  const exceldata = [

    {
      title: 'S No', dataIndex: 'sNo', render: (text, object, index) => {
        return index + 1
      },
      width: 60,

    },

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

  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Vendor Banks Excel')
      .addColumns(exceldata)
      .addDataSource(data, { str2num: true })
      .saveAs('Vendor_Bank_Names.xlsx');
  };
  return (
    <Card
    title={<span style={{ color: 'white' }}>Employee Week-Off View</span>}
      extra={
        <Link to="/employee-week-off-uploads">
          <span style={{ color: 'white' }}>
            <Button type={'primary'}>Create</Button>{' '}
          </span>
        </Link>
      }
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      {/* <Row justify={'end'}>
        <Button
          type="default"
          style={{ color: 'green' }}
          onClick={exportExcel}
          icon={<FileExcelFilled />}
        >
          Download Excel
        </Button>
      </Row> */}
      <Table
        className="custom-table-wrapper"
        columns={columns}
        dataSource={data}
        size="small"
        pagination={{
          pageSize: 100,
          onChange(current, pageSize) {
            setPage(current);
            setPageSize(pageSize);
          },
        }}
      />
    </Card>
  );
};

export default EmployeeWeekOffView;