import React, { useState, useEffect, useRef } from 'react';
import {  Divider, Table, Popconfirm, Card, Tooltip, Switch,Input,Button, } from 'antd';
import Highlighter from 'react-highlight-words';
import { ProjectMappingDto } from '@gtpl/shared-models/gtpl';
import { ColumnProps } from 'antd/lib/table';
import { FormattedMessage } from 'react-intl';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { useIntl } from 'react-intl';
import {RightSquareOutlined,EyeOutlined,EditOutlined,SearchOutlined} from '@ant-design/icons';

import './project-mapping-grid.css';

/* eslint-disable-next-line */
export interface IProjectMappingGridProps {
  projectMappingData: ProjectMappingDto[];
  viewprojectMapping: (projectMapping: ProjectMappingDto, viewOnly: boolean) => void;
  deleteprojectMapping: (projectMapping: ProjectMappingDto) => void;
}

export function ProjectMappingGrid(
  props: IProjectMappingGridProps
) {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',
    key: 'sno',
    width: '70px',
    render: (text, object, index) => (page-1) * 10 +(index+1) 
  
  }, 
  {
    title: 'Project',
    dataIndex: 'projectName',
    key:'projectName',
    ...getColumnSearchProps('projectId')
  },
  {
    title: 'Employee',
    dataIndex: 'empName',
    ...getColumnSearchProps('empName')
  },
  {
    title: 'Attendance eligibility',
    dataIndex: 'attenEligibility',
    key: 'Id',
    render: (text, rowData) => (<>{rowData.attenEligibility===true?'Yes':'No'}</>),
    filters: [
      {
        text: 'Yes',
        value: true,
      },
      {
        text: 'No',
        value: false,
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => 
    {
      console.log(typeof value) // the result is string
      // === is not work
      return record.attenEligibility === value;
    },
  },
  {
    title: 'Status',
    dataIndex: 'isActive',
    // render: (text, rowData) => (<>{rowData.isActive===true?'Active':'InActive'}</>),
    filters: [
      {
        text: 'Active',
        value: 'Active',
      },
      {
        text: 'InActive',
        value: 'InActive',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => 
    {
      console.log(typeof value) // the result is string
      // === is not work
      return record.isActive === value;
    },
  },
//   {
//     title:`Action     `,
//     dataIndex: 'action',
//     render: (text, rowData) => (
//       <span>

//          {/* <EyeOutlined   className={'viewSamplTypeIcon'} type="eye" 
//             onClick={() => { props.viewState(rowData, true); }}
//             style={{ color: '#1890ff', fontSize: '14px' }}
//           /> */}
       
//         {/* <Divider type="vertical" /> */}
        
//         {/* <EditOutlined  className={'editSamplTypeIcon'}  type="edit" 
//             onClick={() => {
//               if (rowData.isActive) {
//                 props.viewprojectMapping(rowData, false);
//               } else {
//                 AlertMessages.getErrorMessage('You Cannot Edit Deactivated row');
//               }
//             }}
//             style={{ color: '#1890ff', fontSize: '14px' }}
//           />
//            <Divider type="vertical" /> */}
//           <Popconfirm onConfirm={e => { props.deleteprojectMapping(rowData);  }}
//           title={
//             rowData.isActive
//             ? 'Are you sure to Deactivate ProjectMap ?'
//             :  'Are you sure to Activate ProjectMap ?'
//           }
//           >
//           <Switch  size="default"
//             className={ rowData.isActive ? 'toggle-activated' : 'toggle-deactivated' }
//             checkedChildren={<RightSquareOutlined type="check" />}
//             unCheckedChildren={<RightSquareOutlined type="close" />}
//             checked={rowData.isActive}
//           />          
//         </Popconfirm>
//       </span>

// )
// }
];
function onChange(pagination, filters, sorter, extra) {
  console.log('params', pagination, filters, sorter, extra);
}
return (
<Table
rowKey={record => record.Id}
columns={sampleTypeColumns}
dataSource={props.projectMappingData}
onChange={onChange}
bordered
/>
);
}
export default ProjectMappingGrid;