import React, { useState, useEffect } from 'react';
import { Card, Divider, Row,Space,Statistic,Col,Badge, } from 'antd';
import {TeamOutlined,IdcardOutlined,SmileTwoTone,SmileOutlined ,FlagOutlined,AuditOutlined,ArrowUpOutlined,ArrowDownOutlined } from '@ant-design/icons'
import { DesignationService, HolidayService, StateService, UserService } from '@gtpl/shared-services/attendance'
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';

import './masters.css';
// import {StatesDto,StateDtoDefault,stateUpdateRequest} from '@gtpl/shared-models/gtpl';


/* eslint-disable-next-line */
export interface MastersProps {
  totalUsersCount:number;
  activeUsersCount:number;
  inActiveUsersCount:number;
  activeDesignationsCount:number;
  totalStatesCount:number;
  totalDesignationsCount:number;
  activeStatesCount:number;
  inActiveStatesCount:number;
  totalHolidaysCount:number;
  activeHolidaysCount:number;
  inActiveHolidaysCount:number;
  inActiveDesignationsCount:number;
}

export function Masters(
  props: MastersProps
) {
  // const [statesData, setStatesData] = useState<StatesDto[]>([])
  // const [activeUsersCount, setActiveUsersCount] = useState<any>(0)
  // const [inActiveUsersCount, setInActiveUsersCount] = useState<any>(0)
  // const [totalUsersCount, setTotalUsersCount] = useState<any>(0)
  // const [activeDesignationsCount, setActiveDesignationsCount] = useState<any>(0)
  // const [inActiveDesignationsCount, setInActiveDesignationsCount] = useState<any>(0)
  // const [totalDesignationsCount, setTotalDesignationsCount] = useState<any>(0)

  // const [activeStatesCount, setActiveStatesCount] = useState<any>(0)
  // const [inActiveStatesCount, setInActiveStatesCount] = useState<any>(0)
  // const [totalStatesCount, setTotalStatesCount] = useState<any>(0)

  // const [activeHolidaysCount, setActiveHolidaysCount] = useState<any>(0)
  // const [inActiveHolidaysCount, setInActiveHolidaysCount] = useState<any>(0)
  // const [totalHolidaysCount, setTotalHolidaysCount] = useState<any>(0)

  // const user = new UserService;
  // const designation = new DesignationService;
  // const state = new StateService;
  // const holiday = new HolidayService;

  // useEffect(() => {getActiveUsersCount(); getActiveDesignationsCount(); getActiveStatesCount(); getActiveHolidaysCount();}, [])

  // const getActiveHolidaysCount= () => {
  //   holiday.getActiveHolidaysCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res.active); console.log(res);
  //       setActiveHolidaysCount(res.active);
  //       setInActiveHolidaysCount(res.inActive);
  //       setTotalHolidaysCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setActiveHolidaysCount(0);
  //       setInActiveHolidaysCount(0);
  //       setTotalHolidaysCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setActiveHolidaysCount(0);
  //     setInActiveHolidaysCount(0);
  //     setTotalHolidaysCount(0);
      
  //   })
  // }
  // const getActiveStatesCount= () => {
  //   state.getActiveStatesCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res.active); console.log(res);
  //       setActiveStatesCount(res.active);
  //       setInActiveStatesCount(res.inActive);
  //       setTotalStatesCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setActiveStatesCount(0);
  //       setInActiveStatesCount(0);
  //       setTotalStatesCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setActiveStatesCount(0);
  //     setInActiveStatesCount(0);
  //     setTotalStatesCount(0);
      
  //   })
  // }
  // const getActiveDesignationsCount= () => {
  //   designation.getActiveDesignationsCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res.active); console.log(res);
  //       setActiveDesignationsCount(res.active);
  //       setInActiveDesignationsCount(res.inActive);
  //       setTotalDesignationsCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setActiveDesignationsCount(0);
  //       setInActiveDesignationsCount(0);
  //       setTotalDesignationsCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setActiveDesignationsCount(0);
  //     setInActiveDesignationsCount(0);
  //     setTotalDesignationsCount(0);
      
  //   })
  // }
  // const getActiveUsersCount= () => {
  //   user.getActiveUsersCount().then(res => {
  //     // console.log(res);
  //     if (res.status) { 
  //       // console.log(res.active); console.log(res);
  //       setActiveUsersCount(res.active);
  //       setInActiveUsersCount(res.inActive);
  //       setTotalUsersCount(res.total);
  //     } else {
  //       if (res.intlCode) {
  //         setActiveUsersCount(0);
  //       setInActiveUsersCount(0);
  //       setTotalUsersCount(0);
          
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setActiveUsersCount(0);
  //     setInActiveUsersCount(0);
  //     setTotalUsersCount(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">
    <Row gutter={16}>
    <div className="column">
      <Col>
  {/* <div className="card"> */}
       <Card title={<span><TeamOutlined  type="border-verticle" style={{ fontSize: '32px'}} /> <span style={{fontSize:'20px'}}>{props.totalUsersCount==null?0:props.totalUsersCount}</span><br></br> <div style={{fontSize:18}}><span>Users</span></div></span>} extra={((JSON.parse(localStorage.getItem('role'))==='L4')) && <a href="#/user" style={{color:'white'}}>More</a>} 
       style={{ margin:1,width: 230,height:150,backgroundColor:'#bfbfbf',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:230,height:90,  bottom:10}}>
      <div className="site-statistic-demo-card">
    <Row gutter={16}>
      <Col span={12}>
        <Card style={{backgroundColor:'white',height:50, borderColor:'white', left:25}}>
          <Statistic  style={{paddingRight:'10'}} value={props.activeUsersCount==null?0:props.activeUsersCount} valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}/>
        </Card>
      </Col>
      <Col span={12}>
      <Card style={{backgroundColor:'white', borderColor:'white',left:20,width:50 }}>
          <Statistic value={props.inActiveUsersCount==null?0:props.inActiveUsersCount} valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
        </Card>
      </Col>
    </Row>
  </div>
  </Card>
     </Card>
     </Col>
  </div>
  {/* </div> */}
  {/* <div className="column">
     <Card title={<span><AuditOutlined   type="border-verticle" /> <span>Employees</span></span>} extra={<a href="#/employees" style={{color:'white'}}>More</a>} 
     style={{ width: 200,height:150,margin:'1%',backgroundColor:'#FFA500',left:25}} > */}
      {/* <h4 style={{textAlign:'center'}}>Active:10  In-Active:2</h4> */}
      {/* <Card style={{backgroundColor:'white', width:198, 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'}}>
          <Statistic title="InActive"value={2}valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
        </Card>
      </Col>
    </Row> */}
  {/* </div>
  </Card>
     </Card>
     </div> */}
     <div className="column">
     {/* <div className="card"> */}
     <Col>
     <Card title={<span><IdcardOutlined   type="border-verticle" style={{ fontSize: '32px'}}  /><span style={{fontSize:'20px'}}> {props.totalDesignationsCount==null?0:props.totalDesignationsCount}</span><br></br><div style={{fontSize:18}}><span>Designations</span></div></span>} extra={<a href="#/designation" style={{color:'white'}}>More</a>} 
     style={{ margin:1,width: 230,height:130,backgroundColor:'#7FFF00',left:25,boxShadow:' 0 4px 8px 0 rgba(0, 0, 0, 0.2)' }} >
      {/* <h4 style={{textAlign:'center'}}>Active:1  In-Active:1</h4> */}
      <Card style={{backgroundColor:'white', width:230, height:90, bottom:10}}>
      <div className="site-statistic-demo-card">
    <Row gutter={16}>
      <Col span={12}>
      <Card style={{backgroundColor:'white',height:50, borderColor:'white',left:25}}>
          <Statistic value={props.activeDesignationsCount==null?0:props.activeDesignationsCount}valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}/>
        </Card>
      </Col>
      <Col span={12}>
      <Card style={{backgroundColor:'white',height:50, borderColor:'white',left:20,width:50 }}>
          <Statistic value={props.inActiveDesignationsCount==null?0:props.inActiveDesignationsCount}valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
        </Card>
      </Col>
    </Row>
  </div>
  </Card>
     </Card>
     {/* </div> */}
     </Col>
     </div>
     <div className="column">
     {/* <div className="card"> */}
     <Col >
      <Card title={<span><FlagOutlined   type="border-verticle" style={{ fontSize: '32px'}} /><span style={{fontSize:'20px'}}> {props.totalStatesCount==null?0:props.totalStatesCount}</span><br></br><div style={{fontSize:18}}><span>States</span></div></span>} extra={<a href="#/states" style={{color:'white'}}>More</a>}
       style={{ margin:1,width: 230,height:150,backgroundColor:'#6495ED',left:25,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:230, height:90, bottom:10}}>
      <div className="site-statistic-demo-card">
    <Row gutter={16}>
      <Col span={12}>
      <Card style={{backgroundColor:'white', borderColor:'white',left:25}}>
          <Statistic  value={props.activeStatesCount==null?0:props.activeStatesCount}valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}/>
        </Card>
      </Col>
      <Col span={12}>
      <Card style={{backgroundColor:'white', borderColor:'white',left:20,width:50 }}>
          <Statistic value={props.inActiveStatesCount==null?0:props.inActiveStatesCount}valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
        </Card>
      </Col>
    </Row>
  </div>
  </Card>
     </Card>
     {/* </div> */}
     </Col>
     </div>
     <div className="column">
     <Col span={12}>
     {/* <div className="card"> */}
     <Card title={<span><SmileOutlined   type="border-verticle" style={{ fontSize: '32px'}} /> <span style={{fontSize:'20px'}}>{props.totalHolidaysCount==null?0:props.totalHolidaysCount}</span><br></br><div style={{fontSize:18}}><span>Holidays</span></div></span>} extra={<a href="#/holidays" style={{color:'white'}}>More</a>}
      style={{margin:1, width: 230,height:150,backgroundColor:'#FFFF00',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:230, height:90, bottom:10}}>
      <div className="site-statistic-demo-card">
    <Row gutter={16}>
      <Col span={12}>
      <Card style={{backgroundColor:'white',height:50, borderColor:'white',left:25}}>
          <Statistic  value={props.activeHolidaysCount==null?0:props.activeHolidaysCount}valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}/>
        </Card>
      </Col>
      <Col span={12}>
      <Card style={{backgroundColor:'white',height:50, borderColor:'white',left:20,width:50 }}>
          <Statistic value={props.inActiveHolidaysCount==null?0:props.inActiveHolidaysCount}valueStyle={{ color: '#cf1322' }} prefix={<ArrowDownOutlined />}/>
        </Card>
      </Col>
    </Row>
  </div>
     </Card>
     </Card>
     </Col>
     </div>
     </Row>
     </div>
     </div>
}
     {/* </Card> */}
    </>
  );
}

export default Masters;