import React, { useEffect, useState } from 'react';

import './attendance-approval.css';
import { Table,Radio,Switch, Button} from 'antd';
import {RightSquareOutlined,EyeOutlined,EditOutlined} from '@ant-design/icons';
/* eslint-disable-next-line */
export interface AttendanceApprovalProps {
  formData:any,
  updateAttendance: (attendance: any,val:string) => void;
  handleBulkApproval: (attendance: any) => void;
  userRole:string;
}


  // useEffect(() => {attendanceApprovalVisibility();}, [])

export const AttendanceApproval = (
  props: AttendanceApprovalProps
) => {
  const options = [
    { label: 'P', value: 'P' },
    { label: 'A', value: 'A' },
    { label: 'H', value: 'H' },
    { label: 'S', value: 'S' },
  ];
  const [approvalVisibity,setApprovalVisibility]=useState<boolean>(true);
  const [selectionType, setSelectionType] = useState('checkbox');
  const [selectedRowKeysData,setSelectedRowKeysData]=useState<string[]>([]);
  //   const onSelectChange = selectedRowKeys => {
  //   console.log('selectedRowKeys changed: ', selectedRowKeys);
  //   // this.setState({ selectedRowKeys });
  // };
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      // console.log(selectedRowKeys);
      setSelectedRowKeysData(selectedRowKeys);
    },
  };
  const handleBulkApproval = () => {
    // console.log(values);
    if(selectedRowKeysData){
      props.handleBulkApproval(selectedRowKeysData);
      
    }
    
  };
 const columns = [
  {
    title: 'S No',
    key: 'sno',
    width: '70px',
    render: (text, object, index) => index+1
  
  },
    {
      title: 'Employee Id',
      key: props.formData.Id,
       render: (text, rowData) => (<>{rowData.Id}</>)
    },
    {
      title: 'Adhar',
      key: 'Id',
      render: (text, rowData) => (<>{rowData.empInfo.empCode.substr(rowData.empInfo.empCode.length-5)}</>)
    },
    {
      title: 'Employee Name',
      key: 'Id',
      render: (text, rowData) => (<>{rowData.empInfo.empName}</>)
    },
    {
      title: 'Approval Status',
      key: 'Id',
      render: (text, rowData) => (<>{rowData.attenApprovalStatus===true?'Approved':'Not-Approved'}</>)
    },
    // {
    //   title: 'Attendance',
    //   key: 'Id',
    //   render: (text, record,index) => ( 
    //     <Radio.Group
    //       options={options}
    //       onChange={(e)=>props.updateAttendance(record,e.target.value)}
    //       value={record.attenStatus}
    //       optionType="button"
    //       buttonStyle="solid"
    //       style={{ display: 'flex' }}
    //       size='large'   />
    //   ),
    // },    
    // {
    //   title: 'Approval Status',
    //   key:'attenApprovalStatus',
    //   render: (text, rowData) => (
    //     <span>
    //         <Switch  size="default"
    //             className={ rowData.attenApprovalStatus ? 'toggle-activated' : 'toggle-deactivated' }
    //             checkedChildren={<RightSquareOutlined type="check" />}
    //             unCheckedChildren={<RightSquareOutlined type="close" />}
    //             checked={rowData.attenApprovalStatus}
    //             onChange={()=>props.updateApprovalStatus(rowData)}
    //           />
    //     </span>
    //   )
    // }
        
    
    
  ];
  
  return (
    <> 
    <Button  onClick={handleBulkApproval}>Approve</Button>
     <Table
        rowSelection={{
          ...rowSelection
        }}
        columns={columns}
        dataSource={props.formData}
        rowKey={record => record.Id}
        // dataSource={data}
      />
    </>
  );
};

export default AttendanceApproval;