import React, { useState, useEffect } from 'react';
import { Button, Card,Drawer,Form,Row,Col,Alert, Anchor,Spin} from 'antd';
import { useIntl, FormattedDate} from 'react-intl'
import { render } from 'react-dom';
import { CostcenterService, EmployeeCreateResponse,EmployeeService,SubContractorService,ProjectService, DesignationService} from '@gtpl/shared-services/attendance';
import {CostCentersDto, EmployeeDto,ProjectsDto,LibSubContractorsDto,StateDtoDefault,stateUpdateRequest,RolesList, DesignationsDto} from '@gtpl/shared-models/gtpl';
// import { AlertMessages} from '../../../../../../shared-utils/alert-messages/src';
import { EmployeeGrid } from '@gtpl/pages/attendance-management/attendance-management-components/employee-grid';
import { EmployeeForm} from '@gtpl/pages/attendance-management/attendance-management-components/employee-form';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
export interface IEmployeePageProps {}
export const EmployeePages= (props:IEmployeePageProps ) =>
{
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [viewOnly, setViewOnly] = useState(true);
  const [EmployeeData, setEmployeeData] = useState<EmployeeDto[]>([])
  const [selectedEmployee, setselectedEmployee] = useState<any>(StateDtoDefault);
  const [CostcentersData, setCostcentersData] = useState<CostCentersDto[]>([])
  const [SubContractorsData,setSubContractorsData]=useState<LibSubContractorsDto[]>([]);
  const [ProjectsData,setProjectsData]=useState<ProjectsDto[]>([])
  const [DesignationsData,setDesignationsData]=useState<DesignationsDto[]>([])
  const service = new EmployeeService;
  const costcenterService=new CostcenterService;
  const subcontractorService = new SubContractorService;
  const projectService = new ProjectService;
  const designationService = new DesignationService;
  const { Link } = Anchor;
  // const employmentTypeService = new employmentTypeService;
  // const {formatMessage:fm}= useIntl()
  const OpenFormTocreateRecord = () => {
    const duplicatedState = JSON.parse(JSON.stringify(StateDtoDefault));
    setisNewForm(true);
    setselectedEmployee(duplicatedState);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllEmployees();getAllCostcenters();getAllSubcontractors();getAllProjects();getAllDesignations();}, []);
  const getAllSubcontractors= () => {
    subcontractorService.getAllSubContractors().then(res => {
      if (res.status) {setSubContractorsData(res.data);
      } else {
        if (res.intlCode) {
          setSubContractorsData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setSubContractorsData([]);
    })
  }
  const getAllCostcenters= () => {
    costcenterService.getAllCostcenters().then(res => {
      if (res.status) {setCostcentersData(res.data);
      } else {
        if (res.intlCode) {
          setCostcentersData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setCostcentersData([]);
    })
  }
  const getAllProjects= () => {
    projectService.getAllActiveProjects().then(res => {
      if (res.status) {setProjectsData(res.data);
      } else {
        if (res.intlCode) {
          setProjectsData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setProjectsData([]);
    })
  }

  const getAllDesignations= () => {
    designationService.getAllDesignations().then(res => {
      console.log(res);
      if (res.status) {
        setDesignationsData(res.data);
      } else {
        if (res.intlCode) {
          setDesignationsData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setProjectsData([]);
    })
  }
  // const getAllEmploymentType= () => {
  //   costcenterService.getAllCostcenters().then(res => {
  //     if (res.status) {setCostcentersData(res.data);
  //     } else {
  //       if (res.intlCode) {
  //         setCostcentersData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setCostcentersData([]);
  //   })
  // }
  // console.log(CostcentersData);
/**
   * To Get All The States Data
   */
  const getAllEmployees= () => {
    service.getAllEmployees().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 viewEmployee = (EmployeeViewData: EmployeeDto, viewOnly: boolean = true) => {
    // console.log(EmployeeViewData);
    setisNewForm(false);
    setselectedEmployee(EmployeeViewData);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  const deleteEmployee = (EmployeeViewData: EmployeeDto) => {
    EmployeeViewData.status=EmployeeViewData.status?false:true;
    EmployeeViewData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    service.ActivatedeActivateEmployee(EmployeeViewData).then(res => {
      if (res.status) {
        getAllEmployees();
        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);
  };
  /**
   * To Save The State
   * @param EmployeeData
   */
  const saveEmployee = (EmployeeData: EmployeeDto) => {
    EmployeeData.Id=0;
    EmployeeData.status=true;
    EmployeeData.createdUser=JSON.parse(localStorage.getItem('userid'));
    EmployeeData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    EmployeeData.costcenterId=1;
    EmployeeData.Role=RolesList.LONE;
    if(EmployeeData.employmentMode==='GTPL'){
      EmployeeData.subContractorId=0;
    }
    EmployeeData.isTerminationApproved=false;
    service.createEmployee(EmployeeData).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Employee Created Successfully');
        getAllEmployees();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const updateEmployee = (EmployeeData: EmployeeDto) => {
    // console.log(EmployeeData);
    // EmployeeData.stateId=3;
    EmployeeData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    if(EmployeeData.employmentMode == 'GTPL'){
      EmployeeData.subContractorId=0;
    }
    service.updateEmployee(EmployeeData).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated Successfully');
        getAllEmployees();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const closeDrawer = () => { setdrawerVisible(false);}
  let viewPortwidth = window.innerWidth;
  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 Details: ' + EmployeeData.length + ', Active ' + EmployeeData.filter(el => el.status).length + ' | In-Active ' + EmployeeData.filter(el => el.status == false).length} extra={<Button type="primary" onClick={() => { OpenFormTocreateRecord(); } } style={{ float: 'right', display: "block" }}>Create</Button>}>
            <EmployeeGrid viewEmployee={viewEmployee} deleteEmployee={deleteEmployee} EmployeeData={EmployeeData} />
          </Card>
          <Drawer bodyStyle={{ paddingBottom: 80 }} title='Employee Form' width={viewPortwidth > 768 ? '50%' : '85%'}
            onClose={closeDrawer} visible={drawerVisible} closable={true}>
            <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} title="Employee Details" size='small'>
              <EmployeeForm key={Date.now()}
                employeeData={selectedEmployee}
                saveEmployee={saveEmployee}
                updateEmployee={updateEmployee}
                viewOnly={viewOnly}
                closeForm={closeDrawer}
                CostcentersData={CostcentersData}
                SubContractorsData={SubContractorsData}
                ProjectsData={ProjectsData}
                DesignationsData={DesignationsData} />
            </Card>
          </Drawer></>
  ): (
    <div className="spins">
    <Spin size="large"/>
    </div>
  )}
    </>
  )
}
export default EmployeePages;