import React, { useRef, useState } from 'react';
import { Table } from "ant-table-extensions";
import { ProjectsReport } from '@gtpl/shared-models/gtpl';
import {SearchOutlined} from '@ant-design/icons'
import Highlighter from 'react-highlight-words';
import './projects-report-grid.css';
import { ColumnProps } from 'antd/lib/table';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';


/* eslint-disable-next-line */
export interface ProjectsReportGridProps {
  ProjectsReportData: ProjectsReport[];
  viewProjectsReport: (ProjectsReport: ProjectsReport, viewOnly: boolean) => void;

}

export function ProjectsReportGrid(
  props: ProjectsReportGridProps
) {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const searchInput = useRef(null);
  const [page, setPage] = React.useState(1);
  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
     
  });
  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };
  const sampleTypeColumns: ColumnProps<any>[] = [
    {
      title:'S.No',
      dataIndex:'empId',
      width: 10,
      render: (text, object, index) => (page-1) * 10 +(index+1)
      // fixed: 'left'
    },
    // {
    //   title: 'CostCenter Name',
    //   dataIndex: 'costCenterName',
    //   width: 110,
    //   ...getColumnSearchProps('costCenterName'),
    //   // render: (text, rowData) => (<>{rowData.costCenterName.costCenterId}</>),
    //   sorter: (a, b) => a.costCenterName.length - b.costCenterName.length,
    //   sortDirections: ['descend', 'ascend'],
    //   // fixed: 'left',
    // },
    {
      title: 'Project Name',
      dataIndex: 'projectName',
      width: 100,
      ...getColumnSearchProps('projectName'),
      sorter: (a, b) => a.projectName.length - b.projectName.length,
      sortDirections: ['descend', 'ascend'],
      // fixed: 'left'
    },
    {
      title: 'Sub Contractor',
      dataIndex: 'subContractorName',
      width: 100,
      ...getColumnSearchProps('subContractorName'),
      sorter: (a, b) => a.subContractorName.length - b.subContractorName.length,
      sortDirections: ['descend', 'ascend'],
      render: (text, rowData) => (<>{rowData.subContractorName==null?'GTPL':rowData.subContractorName}</>)
      // fixed: 'left'
    },
    
    // {
    //   title: 'Employee Code',
    //   dataIndex: 'empCode',
    //   width: 100,
    //   render: (text, rowData) => (<>{rowData.empInfo.empCode}</>),
    //   sorter: (a, b) => a.empCode.length - b.empCode.length,
    //   sortDirections: ['descend', 'ascend'],
    //   // fixed: 'left',
    // },
    // {
    //   title: 'Day wise report',
    //   dataIndex: 'attenStatus',
    //   // fixed: 'center',
    //   children:[
    { title: '1', dataIndex: 'day1',width:35, key: '1',render: (text, rowData) => (<>{rowData.day1?rowData.day1:'N'}</>) },
    { title: '2', dataIndex: 'day2',width:35, key: '2',render: (text, rowData) => (<>{rowData.day2?rowData.day2:'N'}</>) },
    { title: '3', dataIndex: 'day3',width:35, key: '3',render: (text, rowData) => (<>{rowData.day3?rowData.day3:'N'}</>) },
    { title: '4', dataIndex: 'day4',width:35, key: '4',render: (text, rowData) => (<>{rowData.day4?rowData.day4:'N'}</>) },
    { title: '5', dataIndex: 'day5',width:35, key: '5',render: (text, rowData) => (<>{rowData.day5?rowData.day5:'N'}</>) },
    { title: '6', dataIndex: 'day6',width:35, key: '6',render: (text, rowData) => (<>{rowData.day6?rowData.day6:'N'}</>) },
    { title: '7', dataIndex: 'day7',width:35, key: '7',render: (text, rowData) => (<>{rowData.day7?rowData.day7:'N'}</>) },
    { title: '8', dataIndex: 'day8',width:35, key: '8',render: (text, rowData) => (<>{rowData.day8?rowData.day8:'N'}</>) },
    { title: '9', dataIndex: 'day9',width:35, key: '9',render: (text, rowData) => (<>{rowData.day9?rowData.day9:'N'}</>) },
    { title: '10', dataIndex: 'day10',width:35, key: '10',render: (text, rowData) => (<>{rowData.day10?rowData.day10:'N'}</>) },
    { title: '11', dataIndex: 'day11',width:35, key: '11',render: (text, rowData) => (<>{rowData.day11?rowData.day11:'N'}</>) },
    { title: '12', dataIndex: 'day12',width:35, key: '12',render: (text, rowData) => (<>{rowData.day12?rowData.day12:'N'}</>) },
    { title: '13', dataIndex: 'day13',width:35, key: '13',render: (text, rowData) => (<>{rowData.day13?rowData.day13:'N'}</>) },
    { title: '14', dataIndex: 'day14',width:35, key: '14',render: (text, rowData) => (<>{rowData.day14?rowData.day14:'N'}</>) },
    { title: '15', dataIndex: 'day15',width:35, key: '15',render: (text, rowData) => (<>{rowData.day15?rowData.day15:'N'}</>) },
    { title: '16', dataIndex: 'day16',width:35, key: '16',render: (text, rowData) => (<>{rowData.day16?rowData.day16:'N'}</>) },
    { title: '17', dataIndex: 'day17',width:35, key: '17',render: (text, rowData) => (<>{rowData.day17?rowData.day17:'N'}</>) },
    { title: '18', dataIndex: 'day18',width:35, key: '18',render: (text, rowData) => (<>{rowData.day18?rowData.day18:'N'}</>) },
    { title: '19', dataIndex: 'day19',width:35, key: '19',render: (text, rowData) => (<>{rowData.day19?rowData.day19:'N'}</>) },
    { title: '20', dataIndex: 'day20',width:35, key: '20',render: (text, rowData) => (<>{rowData.day20?rowData.day20:'N'}</>) },
    { title: '21', dataIndex: 'day21',width:35, key: '21',render: (text, rowData) => (<>{rowData.day21?rowData.day21:'N'}</>) },
    { title: '22', dataIndex: 'day22',width:35, key: '22',render: (text, rowData) => (<>{rowData.day22?rowData.day22:'N'}</>) },
    { title: '23', dataIndex: 'day23',width:35, key: '23',render: (text, rowData) => (<>{rowData.day23?rowData.day23:'N'}</>) },
    { title: '24', dataIndex: 'day24',width:35, key: '24',render: (text, rowData) => (<>{rowData.day24?rowData.day24:'N'}</>) },
    { title: '25', dataIndex: 'day25',width:35, key: '25',render: (text, rowData) => (<>{rowData.day25?rowData.day25:'N'}</>) },
    { title: '26', dataIndex: 'day26',width:35, key: '26',render: (text, rowData) => (<>{rowData.day26?rowData.day26:'N'}</>) },
    { title: '27', dataIndex: 'day27',width:35, key: '27',render: (text, rowData) => (<>{rowData.day27?rowData.day27:'N'}</>) },
    { title: '28', dataIndex: 'day28',width:35, key: '28',render: (text, rowData) => (<>{rowData.day28?rowData.day28:'N'}</>) },
    { title: '29', dataIndex: 'day29',width:35, key: '29',render: (text, rowData) => (<>{rowData.day29?rowData.day29:'N'}</>) },
    { title: '30', dataIndex: 'day30',width:35, key: '30',render: (text, rowData) => (<>{rowData.day30?rowData.day30:'N'}</>) },
    { title: '31', dataIndex: 'day31',width:35, key: '31',render: (text, rowData) => (<>{rowData.day31?rowData.day31:'N'}</>) },
    //   ]
    // },
    
    {
      title: 'Worked on Sundays',
      dataIndex: 'PresentSundays',
      width: 100,
      // sorter: (a, b) => a.PresentSundays.length - b.PresentSundays.length,
      sortDirections: ['descend', 'ascend'],
      // fixed: 'right'
    },
    // {
    //   title: 'Total Leaves',
    //   dataIndex: 'totalLeaves',
    //   width: 100,
    //   sorter: (a, b) => a.TotalLeaves.length - b.TotalLeaves.length,
    //   sortDirections: ['descend', 'ascend'],
    //   // fixed: 'right'
    // },
    {
      title: 'Total Working Days',
      dataIndex: 'totalPresents',
      fixed: 'right',
      width: 100,
      sorter: (a, b) => a.totalPresents.length - b.totalPresents.length,
      sortDirections: ['descend', 'ascend'],
      render: (text, rowData) => (<>{rowData.totalPresents}</>)
      
    },
    {
      title: 'Total Ot Hours',
      dataIndex: 'totalOtHours',
      fixed: 'right',
      width: 100,
      // sorter: (a, b) => a.totalOtHours.length - b.totalOtHours.length,
      sortDirections: ['descend', 'ascend'],
      // fixed: 'right'
      
    },
  ] 
  return (
      <>
        <Table
          rowKey={record => record.Id}
          columns={props.ProjectsReportData.length>0?sampleTypeColumns:null}
          dataSource={props.ProjectsReportData}
          pagination={{ onChange(current) {setPage(current);} }}
          // scroll={{ x: 'calc(1000px + 50%)', y:440 }}
          size="small"
          bordered
          exportable 
          exportableProps={{ /*showColumnPicker: true,*/fileName: "Attendance report" }}
          >
        </Table>
      </>
    );
}

export default ProjectsReportGrid;