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

import './attendance-form.css';
import { Table,Radio,Switch, Button} from 'antd';
import {RightSquareOutlined,EyeOutlined,EditOutlined} from '@ant-design/icons';
/* eslint-disable-next-line */
export interface AttendanceFormProps {
  formData:any,
  updateAttendance: (attendance: any,val:string) => void;
  updateApprovalStatus: (attendance: any) => void;
  handleBulkApproval: (attendance: any) => void;
  submitAttendance:(submitAttendance:any)=>void;
  userRole:string;
}
// const [userRole,setUserRole]=useState<string>(JSON.parse(localStorage.getItem('role')));
// useEffect(() => {}, [])
// console.log(userRole);
export const AttendanceForm = (
  props: AttendanceFormProps
) => {
  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 [userRole,setUserRole]=useState<string>(JSON.parse(localStorage.getItem('role')));
  //   const onSelectChange = selectedRowKeys => {
  //   console.log('selectedRowKeys changed: ', selectedRowKeys);
  //   // this.setState({ selectedRowKeys });
  // };
  console.log(props.formData);
  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 submitAttendance=()=>{
    props.submitAttendance(0);
  }
 const columns = [
    // {
    //   title: 'Employee Id',
    //   key: props.formData.Id,
    //    render: (text, rowData) => (<>{rowData.empInfo.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.empCode.substr(rowData.empInfo.empCode.length-5)} -   {rowData.empInfo.empName}</>)
    },
    
    {
      title: 'Attendance',
      key: 'Id',
      
      render: (text, record,index) => ( 
        <Radio.Group
          disabled={record.attenApprovalStatus===true && (userRole==='L1'||userRole==='L2'||userRole==='L3')}
          options={options}
          onChange={(e)=>props.updateAttendance(record,e.target.value)}
          value={record.attenStatus}
          optionType="button"
          buttonStyle="solid"
          style={{ display: 'flex' }}
          size='large'   />
      ),
    },  
    {
      title: 'Approved?',
      key: 'Id',
      render: (text, rowData) => (<>{rowData.attenApprovalStatus===true?'Yes':'No'}</>)
    },
    // {
    //   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>
    //   )
    // }
        
    
    
  ];
  console.log(props.userRole)
  if(userRole!='L1'){
    return (
      <> 
         <Button type='primary' onClick={handleBulkApproval}>Approve</Button>
        <Table
           rowSelection={{
             ...rowSelection
           }}
           columns={columns}
           dataSource={props.formData}
           rowKey={record => record.Id}
           // dataSource={data}
         />
        
   
      </>
    );
  }else{
    return (
      <> 
        <Button type='primary' onClick={submitAttendance}>Submit Attendance</Button>
        <Table
          columns={columns}
           dataSource={props.formData}
           rowKey={record => record.Id}
           // dataSource={data}
         />
        
   
      </>
    );
  }

};

export default AttendanceForm;