import React, { useEffect, useState } from 'react';
import {  Card, Divider, Row,Space,Statistic,Col} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { EmployeeDto } from '@gtpl/shared-models/gtpl';
import { QuestionOutlined, IssuesCloseOutlined , UserDeleteOutlined ,AuditOutlined,CloseOutlined,ExclamationOutlined,CheckOutlined ,MinusSquareOutlined ,FlagOutlined,ArrowUpOutlined,ArrowDownOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'
import moment from 'moment';
import Layout from 'antd/lib/layout/layout';
import { EmployeeService } from '@gtpl/shared-services/attendance'
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';

import './employees.css';

/* eslint-disable-next-line */
export interface EmployeesProps {
  totalTerminatedCount:number;
  activeEmpsCount:number;
  totalTerminationsCount:number;
  approvedterminationCount:number;
  pendingTerminationsCount:number;
}

export function Employees(
  props: EmployeesProps
) {
  
  // const [activeEmpsCount, setActiveEmpsCount] = useState<any>(0)
  // const [terminatedEmpsCount, setTerminatedEmpsCount] = useState<any>(0)
  // const [totalTerminatedCount, setTotalTerminatedCount] = useState<any>(0)

  // const [approvedterminationCount, setApprovedterminationCount] = useState<any>(0)
  // const [pendingTerminationsCount, setPendingTerminationsCount] = useState<any>(0)
  // const [totalTerminationsCount, setTotalTerminationsCount] = useState<any>(0)
  // const employee = new EmployeeService;

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

  // const getTerminationCount= () => {
  //   employee.getTerminationCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res); console.log(res);
  //       setApprovedterminationCount(res.data);
  //       setPendingTerminationsCount(res.data1);
  //       setTotalTerminationsCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setApprovedterminationCount(0);
  //       setPendingTerminationsCount(0);
  //       setTotalTerminationsCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setApprovedterminationCount(0);
  //     setPendingTerminationsCount(0);
  //     setTotalTerminationsCount(0);
      
  //   })
  // }
  // const getTerminationApprovalCount= () => {
  //   employee.getTerminationApprovalCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res); console.log(res);
  //       setActiveEmpsCount(res.data);
  //       setTerminatedEmpsCount(res.data1);
  //       setTotalTerminatedCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setActiveEmpsCount(0);
  //       setTerminatedEmpsCount(0);
  //       setTotalTerminatedCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setActiveEmpsCount(0);
  //     setTerminatedEmpsCount(0);
  //     setTotalTerminatedCount(0);
      
  //   })
  // }
  return (
    <>
      {((JSON.parse(localStorage.getItem('role'))==='L4')||(JSON.parse(localStorage.getItem('role'))==='L3')||(JSON.parse(localStorage.getItem('role'))==='L2')) &&
    <div>
        {/* <Card style={{position:'relative', width: 1200,height:200, backgroundColor:'#f5f5f5',right:6 }}> */}
        
        <div className="grid-container">
        {/* <div className="column">
      {/* <div className="card"> */}
           {/* <Card title={<span><AuditOutlined  type="border-verticle" /> Total-{12}<h3>Employees</h3></span>} extra={<a href="#/employees" style={{color:'white'}}>More</a>} 
           style={{ width: 280,height:180,backgroundColor:'#ffbf00',left:25,boxShadow:' 0 4px 8px 0 rgba(0, 0, 0, 0.2)' }} > */} 
          {/* <h4 style={{textAlign:'center'}} >Active:10  In-Active:2</h4> */}
          {/* <Card style={{backgroundColor:'white', width:280,height:100,  bottom:10}}>
          <div className="site-statistic-demo-card">
        <Row gutter={16}>
          <Col span={12}>
            <Card style={{backgroundColor:'white', borderColor:'white',left:25}}>
              <Statistic title="Active"  value={10} valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}/>
            </Card>
          </Col>
          <Col span={12}> */}
          {/* <Card style={{backgroundColor:'white', borderColor:'white',width:100,left:20 }}>
              <Statistic title="InActive"value={2} valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
            </Card>
          </Col>
        </Row>
      </div>
      </Card>
         </Card>
      </div> */}
         {/* </div> */}
         <Row gutter={16}>
           <Col>
         <div className="column">
         {/* <div className="card"> */}
          <Card title={<span><UserDeleteOutlined  type="border-verticle" style={{ fontSize: '32px'}}/><span style={{fontSize:'20px'}}> {props.totalTerminatedCount}</span><br></br><div style={{fontSize:18}}><span>Employee Termination</span></div></span>} extra={<a href="#/employeetermination" style={{color:'white'}}>More</a>}
           style={{margin:1,left:22, width: 260,height:180,backgroundColor:'#f04134',boxShadow:' 0 4px 8px 0 rgba(0, 0, 0, 0.2)' }} >
          {/* <h4 style={{textAlign:'center'}}>Active:6  In-Active:2</h4> */}
          <Card style={{backgroundColor:'white', width:260, height:120, bottom:10}}>
          <div className="site-statistic-demo-card">
        <Row gutter={16}>
          <Col span={12}>
          <Card style={{backgroundColor:'white', borderColor:'white',left:100}}>
              <Statistic title="Terminated" value={props.activeEmpsCount==null?0:props.activeEmpsCount}valueStyle={{ color: '#3f8600' }}prefix={<MinusSquareOutlined />}/>
            </Card>
          </Col>
          <Col span={12}>
          {/* <Card style={{backgroundColor:'white', borderColor:'white',width:100,left:20}}>
              <Statistic title="Is Terminated?"value={terminatedEmpsCount}valueStyle={{ color: '#cf1322' }} prefix={<QuestionOutlined />}/>
            </Card> */}
          </Col>
        </Row>
      </div>
      </Card>
         </Card>
         {/* </div> */}
         </div>
         </Col>
         <div className="column">
         <Col span={12}>
         {/* <div className="card"> */}
         <Card title={<span><IssuesCloseOutlined   type="border-verticle"style={{ fontSize: '32px'}}/><span style={{fontSize:'20px'}}> {props.totalTerminationsCount==null?0:props.totalTerminationsCount}</span><br></br><div style={{fontSize:18}}><span>Termination Approval</span></div></span>} extra={((JSON.parse(localStorage.getItem('role'))==='L4')) && <a href="#/employeeterminationapproval" style={{color:'white'}}>More</a>}
          style={{ margin:1,width: 260,height:180,backgroundColor:'#6495ED',left:25,boxShadow:' 0 4px 8px 0 rgba(0, 0, 0, 0.2)' }} >
          {/* <h4 style={{textAlign:'center'}}>Active:3 In-Active:2</h4> */}
          <Card style={{backgroundColor:'white', width:260, height:120, bottom:10}}>
          <div className="site-statistic-demo-card">
        <Row gutter={16}>
          <Col span={12}>
          <Card style={{backgroundColor:'white', borderColor:'white',left:25}}>
              <Statistic title="Approved" value={props.approvedterminationCount==null?0:props.approvedterminationCount}valueStyle={{ color: '#3f8600' }}prefix={<CheckOutlined />}/>
            </Card>
          </Col>
          <Col span={12}>
          <Card style={{backgroundColor:'white', borderColor:'white',width:100,left:20}}>
              <Statistic title="Pending"value={props.pendingTerminationsCount==null?0:props.pendingTerminationsCount}valueStyle={{ color: '#cf1322' }} prefix={<ExclamationOutlined />}/>
            </Card>
          </Col>
        </Row>
      </div>
         </Card>
         </Card>
         </Col>
         </div>
         </Row>
         </div>
         </div>
}
         
         
         {/* </Card> */}
        </>
      );
    }

export default Employees;