import React, { useEffect, useState } from 'react';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';

import './employee-projects-pages.css';
import { EmployeeProjectsGrid } from '@gtpl/pages/attendance-management/attendance-management-components/employee-projects-grid';
import { ProjectMappingService } from '@gtpl/shared-services/attendance';
import { ProjectMappingDto } from '@gtpl/shared-models/gtpl';
import { EmployeeProjectsResponseDto } from 'libs/shared-models/gtpl/src/lib/project-mapping/employee-projects-response-dto';
import { Anchor, Card, Spin } from 'antd';
import Link from 'antd/lib/typography/Link';

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

export function EmployeeProjectsPages(
  props: EmployeeProjectsPagesProps
) {

  const service = new ProjectMappingService;

  const [employeeProjectsData, setEmployeeProjectsData] = useState<any>([])

  const getEmployeeAssignedProjects = () => {
    service.getEmployeeAssignedProjects().then(res => {
      console.log(res.data);
      if (res.status) {
        // setEmployeeProjectsData(res.data);
      } else {
        if (res.intlCode) {
          setEmployeeProjectsData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmployeeProjectsData([]);
    })
  }
  const [loading, setLoading] = useState(true)
  useEffect(() => {getEmployeeAssignedProjects(); setTimeout(() => setLoading(false), 1000)}, [])

  return (
    <>
    {loading === false ? (
     <><Anchor affix={false}>
          <Link href="#/dashboard" title="Dashboard" />
        </Anchor>
          <Card bodyStyle={{ overflow: 'auto' }} title={'Employee Projects Details: ' + employeeProjectsData.length + ' , Active ' + employeeProjectsData.filter(el => el.assignedStatus == 1).length + ' | In Active ' + employeeProjectsData.filter(el => el.assignedStatus == 0).length}>
            <EmployeeProjectsGrid key={Date.now()} employeeProjectsData={employeeProjectsData} />
          </Card></>
     ): (
      <div className="spins">
      <Spin size="large"/>
      </div>
    )}
    </>
  )
}

export default EmployeeProjectsPages;