import React, { useState, useEffect } from 'react';
import { Button,Divider,Popconfirm,Tooltip, Switch,Input, Card,Spin, Drawer, Form, Row, Col, Alert, Select, Table, Anchor } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { CostcenterService, EmployeeService, ProjectMappingService, ProjectService } from '@gtpl/shared-services/attendance';
import './project-mapping-pages.css';
import { ProjectMapForm} from '@gtpl/pages/attendance-management/attendance-management-components/project-mapping-form';

import { ProjectMappingGrid } from '@gtpl/pages/attendance-management/attendance-management-components/project-mapping-grid';
import { CostCentersDto, ProjectMappingDto,ProjectMappingDtoDefault, ProjectsDto } from '@gtpl/shared-models/gtpl';
const { Option } = Select;
import {RightSquareOutlined,EyeOutlined,EditOutlined,SearchOutlined} from '@ant-design/icons';

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

export const ProjectMappingPages=(props: IProjectMappingPagesProps)=> {
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [form] = Form.useForm();
  const projectMappingService = new ProjectMappingService;
  const [projectMapData, setProjectMapData] = useState<ProjectMappingDto[]>([])
  const [showProjectMap, setShowProjectMap] = useState<Boolean>(false)
  const [selectedProjectMap, setSelectedProjectMap] = useState<any>(ProjectMappingDtoDefault)
  // const projectService = new ProjectService;
  // const costcenterService = new CostcenterService;
  // const employeeService = new EmployeeService;
  // const [projectsData, setProjectsData] = useState<ProjectsDto[]>([])
  // const [costcentersData, setCostCentersData] = useState<CostCentersDto[]>([])
  // const [selectedProject, setSelectedProject] = useState<Number>(null)
  // const [selectedCostCenter, setSelectedCostCenter] = useState<Number>(null)
  // const [EmployeesData, setEmployeesData] = useState<any>([])
  const { Link } = Anchor;
  const [viewOnly, setViewOnly] = useState(true);
  const OpenFormTocreateRecord = () => {
    const duplicatedProjectMap = JSON.parse(JSON.stringify(ProjectMappingDtoDefault));
    setisNewForm(true);
    setSelectedProjectMap(duplicatedProjectMap);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllProjectTransfers();}, [])
  const getAllProjectTransfers= () => {
    projectMappingService.getAllProjectTransfers().then(res => {
      if (res.status) {setProjectMapData(res.data);
      } else {
        if (res.intlCode) {
          setProjectMapData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setProjectMapData([]);
    })
  }
  const viewProjectMap = (projectMapviewData: ProjectMappingDto, viewOnly: boolean = true) => {
    // console.log(ProjectViewData);
    setisNewForm(false);
    setSelectedProjectMap(projectMapviewData);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  // const [visible, setVisible] = useState(true);

  // const handleClose = () => {
  //   setVisible(false);
  // const onReset = () => {
  //   form.resetFields();
  //   setProjectMapData([]);
  // };

 /**
   * To Save The Projectmaps
   * @param ProjectMapData
   */

  const saveProjectMap = (projectMapData: ProjectMappingDto) => {
    console.log('hiiiiii');
    projectMapData.projectId=0;
    projectMapData.isActive=true;
    // projectMapData.createdUser=0;
    projectMapData.createdUser=JSON.parse(localStorage.getItem('userid'));
    projectMappingService.createProjectMapping(projectMapData).then(res => { 
      console.log(projectMapData);
      if (res.status) {
        AlertMessages.getSuccessMessage('Project Mapping Created Successfully');
        getAllProjectTransfers();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
          setdrawerVisible(false);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const columns = [
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      render: (text, object, index) => index+1
    
    },
    {
      title: 'Project Name',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    {
      title: 'Attendance Eligibility',
      render: (text, rowData) => (<>{rowData.attenEligibility===1?'Yes':'No'}</>),
      key: 'status',
    },
  ];
  const deleteProjectTransfer = (projectMapData: ProjectMappingDto) => {
    projectMapData.isActive=projectMapData.isActive?false:true;
    projectMappingService.ActivatedeActivateProjectMap(projectMapData).then(res => {
      if (res.status) {
        getAllProjectTransfers();
        AlertMessages.getSuccessMessage('Success');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const updateProjectTransfer = (projectMapData: ProjectMappingDto) => {
    projectMapData.createdUser=JSON.parse(localStorage.getItem('userid'));
    projectMapData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    projectMappingService.updateProjectMap(projectMapData).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated Successfully');
        getAllProjectTransfers();
        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={'Project Transfer Details: ' + projectMapData.length + ', Active ' + projectMapData.filter(el => el.isActive).length + ' | In-Active ' + projectMapData.filter(el => el.isActive == false).length} extra={<Button type="primary" onClick={() => { OpenFormTocreateRecord(); } } style={{ float: 'right', display: "block" }}>Create</Button>}>
            <ProjectMappingGrid viewprojectMapping={viewProjectMap} deleteprojectMapping={deleteProjectTransfer} projectMappingData={projectMapData} />
          </Card>
          <Drawer bodyStyle={{ paddingBottom: 80 }} title='Project Transfer Form' width={viewPortwidth > 768 ? '50%' : '85%'}
            onClose={closeDrawer} visible={drawerVisible} closable={true}>
            <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} size='small'>
              <ProjectMapForm key={Date.now()}
                projectMapData={selectedProjectMap}
                saveProjectMap={saveProjectMap}
                updateProjectMap={updateProjectTransfer}
                viewOnly={viewOnly}
                closeForm={closeDrawer} />
            </Card>
          </Drawer></>
 ): (
  <div className="spins">
  <Spin size="large"/>
  </div>
)}
    </>
  );
}
export default ProjectMappingPages;