import React, { useState } from 'react';
import './ot-creation-form.css';
import { Table,InputNumber,Input,Switch,Form, Button, Radio} from 'antd';
import {RightSquareOutlined,EyeOutlined,EditOutlined} from '@ant-design/icons';
import { AttendanceDto } from '@gtpl/shared-models/gtpl';
/* eslint-disable-next-line */
export interface OtCreationFormProps {
  formData:any,
  updateOtHours: (val:any,data:AttendanceDto) => void;
  updateOtApprovalStatus: (ot: any) => void;
  handleOtBulkApproval: (ot: any) => void;
  submitOt:(submitOt:any)=>void;
  userRole:string;
}

export function OtCreationForm(
  props: OtCreationFormProps
) {
  const [form] = Form.useForm();
  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 rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      // console.log(selectedRowKeys);
      setSelectedRowKeysData(selectedRowKeys);
    },
  };
  const handleOtBulkApproval = () => {
    // console.log(values);
    if(selectedRowKeysData){
      props.handleOtBulkApproval(selectedRowKeysData);      
    }    
  };
  const submitOt=()=>{
    props.submitOt(0);
  }
  const columns = [
    // {
    //   title: 'Employee Code',
    //   key: 'empCode',
    //   render: (text, rowData) => (<>{rowData.empInfo.empCode}</>)
    // },
    {
      title: 'Employee Name',
      key: 'empName',
      render: (text, rowData) => (<>{rowData.empInfo.empCode.substr(rowData.empInfo.empCode.length-5)} -   {rowData.empInfo.empName}</>)
    },
    {
      title: 'Ot Hours',
      key:'otHours',
      dataindex:'otHours',
      render: (text, rowData,index) =>{return (
          <>
          <Form.Item
              name={rowData.Id}
              style={{ margin: 0 }}
            >
               
              <InputNumber 
              disabled={rowData.otApprovalStatus==true}
               key={rowData.Id} defaultValue={rowData.otHours} name={`otHours${rowData.Id}`} onChange={(e)=>props.updateOtHours(e,rowData)} 
               />
            </Form.Item></>
          )
      }, 
    },
    {
      title: 'OT Approved?',
      key: 'Id',
      render: (text, rowData) => (<>{rowData.otApprovalStatus===true?'Yes':'No'}</>)
    },
    // {
    //   title: 'Approval Status',
    //   key:'otApprovalStatus',
    //   render: (text, rowData) => (
    //     <span>
    //         <Switch  size="default"
    //             className={ rowData.otApprovalStatus ? 'toggle-activated' : 'toggle-deactivated' }
    //             checkedChildren={<RightSquareOutlined type="check" />}
    //             unCheckedChildren={<RightSquareOutlined type="close" />}
    //             checked={rowData.otApprovalStatus}
    //             onChange={()=>props.updateOtApprovalStatus(rowData)}
    //           />
    //     </span>
    //   )
    // }
    
  ];
  if(userRole!='L1'){
    return (
      <> 
         <Button type='primary' onClick={handleOtBulkApproval}>Approve OT</Button>
        <Table
           rowSelection={{
             ...rowSelection
           }}
           columns={columns}
           dataSource={props.formData}
           rowKey={record => record.Id}
           // dataSource={data}
         />
        
   
      </>
    );
  }else{
    return (
      <> 
        <Button type='primary' onClick={submitOt}>Submit OT</Button>
        <Table
          columns={columns}
           dataSource={props.formData}
           rowKey={record => record.Id}
           // dataSource={data}
         />
        
   
      </>
    );
  }
}

export default OtCreationForm;