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

import './employee-termination-pages.css';
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 { EmployeeTerminationGrid } from '@gtpl/pages/attendance-management/attendance-management-components/employee-termination-grid';

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

export function EmployeeTerminationPages(props: EmployeeTerminationPagesProps) {
  const [EmployeeData, setEmployeeData] = useState<EmployeeDto[]>([])
  const service = new EmployeeService;
  const [selectedEmployee, setselectedEmployee] = useState<any>(StateDtoDefault);
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [viewOnly, setViewOnly] = useState(true);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const { Link } = Anchor;
  useEffect(() => {getActiveEmployees();}, []);
  const getActiveEmployees= () => {
    service.getActiveEmployees().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 terminateEmployee = (employeeViewData: EmployeeDto) => {
    console.log(employeeViewData);
    employeeViewData.isTerminated=employeeViewData.isTerminated?false:true;
    employeeViewData.updatedUser = JSON.parse(localStorage.getItem('userid'));
    service.terminateEmployee(employeeViewData).then(res => { console.log(res);
      if (res.status) {
        getActiveEmployees();
        AlertMessages.getSuccessMessage('Success');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const terminateEmployees = (employeeViewData: EmployeeDto[]) => {
    console.log(employeeViewData);
    employeeViewData.forEach((res) => {
      res.isTerminated=res.isTerminated?false:true;
      res.updatedUser = JSON.parse(localStorage.getItem('userid'));
    })
    service.terminateEmployees(employeeViewData).then(res => { console.log(res);
      if (res.status) {
        getActiveEmployees();
        AlertMessages.getSuccessMessage('Success');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const [visible, setVisible] = useState(true);

  const handleClose = () => {
    setVisible(false);
  };
  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 Details: ' + EmployeeData.length + ', Active ' + EmployeeData.filter(el => el.isTerminated == false).length + ' | Terminated ' + EmployeeData.filter(el => el.isTerminated).length}>
            <EmployeeTerminationGrid key={Date.now()} EmployeeData={EmployeeData} terminateEmployee={terminateEmployee} terminateEmployees={terminateEmployees} />
          </Card></>
     ): (
      <div className="spins">
      <Spin size="large"/>
      </div>
    )}
    </>
  )
}

export default EmployeeTerminationPages;