import React, { useEffect, useState } from 'react';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import { Card, Anchor,Spin  } from 'antd';
import { EmployeeDto, StateDtoDefault } from '@gtpl/shared-models/gtpl';
import { CostcenterService, EmployeeCreateResponse,EmployeeService,SubContractorService} from '@gtpl/shared-services/attendance';
import { EmployeeTerminationApprovalGrid } from '@gtpl/pages/attendance-management/attendance-management-components/employee-termination-approval-grid';
import './employee-termination-approval-pages.css';

/* eslint-disable-next-line */
export interface EmployeeTerminationApprovalPagesProps {}

export function EmployeeTerminationApprovalPages(
  props: EmployeeTerminationApprovalPagesProps
) {
  
  const service = new EmployeeService;
  const [EmployeeData, setEmployeeData] = useState<EmployeeDto[]>([])
  const userId = JSON.parse(localStorage.getItem('userid'));
  useEffect(() => {getTerminatedEmployees();}, []);
  const { Link } = Anchor;
  const getTerminatedEmployees= () => {
    service.getTerminatedEmployees().then(res => {
      if (res.status) {setEmployeeData(res.data);
      } else {
        if (res.intlCode) {
          setEmployeeData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmployeeData([]);
    })
  }
  const approveEmployeeTermination = (employeeViewData: EmployeeDto) => {
    console.log(employeeViewData);
    // employeeViewData.isTerminationApproved=employeeViewData.isTerminationApproved;
    employeeViewData.isTerminationApproved=employeeViewData.isTerminationApproved?false:true;
    employeeViewData.terminationApprovedBy = employeeViewData.isTerminationApproved?userId:null;
    employeeViewData.status = employeeViewData.isTerminationApproved?false:true;
    employeeViewData.isTerminated = employeeViewData.isTerminationApproved?true:false;
    employeeViewData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    service.approveEmployeeTermination(employeeViewData).then(res => {
      if (res.status) {
        
        AlertMessages.getSuccessMessage('Success');
        getTerminatedEmployees();
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setTimeout(() => setLoading(false), 1000)
  }, [])
  return (
    <>
    {loading === false ? (
    <><Anchor affix={false}>
          <Link href="#/dashboard" title="Dashboard" />
        </Anchor>
          <Card bodyStyle={{ overflow: 'auto' }} title={'Employee Termination Approval: ' + EmployeeData.length + ', Pending ' + EmployeeData.filter(el => el.isTerminationApproved == false).length + ' | Approved ' + EmployeeData.filter(el => el.isTerminationApproved).length}>
            <EmployeeTerminationApprovalGrid EmployeeData={EmployeeData} approveEmployeeTermination={approveEmployeeTermination} />
          </Card></>
    ): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
    </>
  )
}

export default EmployeeTerminationApprovalPages;