import React, { useState, useEffect, useRef } from 'react';
import { Button, Card, Col, DatePicker, Divider, Row,Input } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import './attendance.css';
import { AttendanceDto} from '@gtpl/shared-models/gtpl';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import { Table } from "ant-table-extensions";
import Highlighter from 'react-highlight-words';
import {RightSquareOutlined,EyeOutlined,EditOutlined,SearchOutlined} from '@ant-design/icons';
import moment from 'moment';
import Layout from 'antd/lib/layout/layout';
import { AttendanceService } from '@gtpl/shared-services/attendance'

/* eslint-disable-next-line */
export interface AttendanceProps {
  // selectedDate: string;
  attendanceData: AttendanceDto[];

}

export function Attendance(
  props: AttendanceProps
) {

  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 attendance = new AttendanceService;
  // const [attendanceData, setAttendanceData] = useState<AttendanceDto[]>([])

  
  // useEffect(() => {getAttendanceData(props.selectedDate); console.log(props.selectedDate)}, [])
  // const selectedDate = props.selectedDate;
  // console.log(selectedDate);
  // const getAttendanceData = (reqDate) => {
  //   attendance.getAttendanceByDate({attenDate:reqDate}).then(res => {
  //     if (res.status) {
  //       console.log(res);
  //       setAttendanceData(res.data);
  //       // AlertMessages.getSuccessMessage('State Created Successfully');
      
  //     } else {
  //       if (res.intlCode) {
  //       setAttendanceData([]);

  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     setAttendanceData([]);

  //     AlertMessages.getErrorMessage(err.message);
  //   })
  // }
  
  const sampleTypeColumns: ColumnProps<any>[] = [
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      render: (text, object, index) => (page-1) * 10 +(index+1)
    
    },
    {
      title: 'Project Name',
      dataIndex: 'projectName',
      ...getColumnSearchProps('projectName')
    },
    {
      title: 'Sub Contractors Name',
      dataIndex: 'subContractorName',
      render: (text, rowData) => (<>{rowData.subContractorName===null?'GTPL':rowData.subContractorName}</>),
      ...getColumnSearchProps('subContractorName')
    },
    {
      title: 'No. of Employee',
      dataIndex: 'noOfEmps',
    },

    
    {
      title: 'No. of Present',
      dataIndex: 'presentCount',

    },
    {
      title: 'No. of Absent',
      dataIndex: 'absentCount',

    },
    {
      title: 'No. of Submitted',
      dataIndex: 'submittedCount',
    },
    {
      title: 'Approved',
      dataIndex: 'approvedCount',

    },
    {
      title: 'Ot Hours',
      dataIndex: 'otHrs',
      render: (text, rowData) => (<>{rowData.otHrs===null?'0':rowData.otHrs}</>),
    },
  ]
  return (
    <>
    <div className='scrollable'>
    <Layout style={{padding:10, backgroundColor:'#f5f5f5' }}>
    <div style={{backgroundColor:'#f5f5f5' }}>
    <Card title= "ATTENDANCE" style={{position:'relative',backgroundColor:'#108ee9', height:50 }} extra={<a href="#/monthwiseReport" style={{color:'white'}}>Report</a>} ></Card>
     <Table
      rowKey={record => record.CostcenterId}
      columns={props.attendanceData.length>0?sampleTypeColumns:null}
      dataSource={props.attendanceData}
      pagination={{ onChange(current) {setPage(current);} }}
      bordered
      exportable 
      exportableProps={{ /*showColumnPicker: true,*/fileName: "Attendance Abstract" }}
    />
     </div>
     </Layout>
     </div>
    </>
  );
}

export default Attendance;