import React, { useState, useEffect } from 'react';
import { Button, Card,Drawer,Form,Row,Col,Alert,Select, Anchor,Spin} from 'antd';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import { AttendanceService, ProjectMappingService, ProjectService,SubContractorService} from '@gtpl/shared-services/attendance';
import { AttendanceForm} from '@gtpl/pages/attendance-management/attendance-management-components/attendance-form';
import {AttendanceApproval} from '@gtpl/pages/attendance-management/attendance-management-components/attendance-approval';
import { OtCreationForm} from '@gtpl/pages/attendance-management/attendance-management-components/ot-creation-form';
import './attendance-pages.css';
import { AttendanceDto } from '@gtpl/shared-models/gtpl';
const { Option } = Select;
/* eslint-disable-next-line */
export interface AttendancePagesProps {}

export const AttendancePages = (
  props: AttendancePagesProps
) => {
  const projectService = new ProjectService;
  const attendanceService = new AttendanceService;
  const projectMappingService = new ProjectMappingService;
  const subContractorService= new SubContractorService;
  const [projectsData, setProjectsData] = useState<any[]>([])
  const [subContractorsData, setSubcontractorsData] = useState<any[]>([])
  const [employeesData, setEmployeesData] = useState<any[]>([])
  const [attendanceData, setAttendanceData] = useState<any[]>([])
  const [otData, setOtData] = useState<any[]>([])
  const [showAttendanceForm, setShowAttendanceForm] = useState<Boolean>(false)
  const [showOtForm, setShowOtForm] = useState<Boolean>(false)
  const [selectedProject, setSelectedProject] = useState<Number>(null)
  const [selectedSubContractor,setSelectedSubContractor]=useState<Number>(0)
  const [userid,setUserid]=useState<Number>(JSON.parse(localStorage.getItem('userid')))
  const [userRole,setUserRole]=useState<string>(JSON.parse(localStorage.getItem('role')))
  const [latitude,setLatitude]=useState<any>()
  const [longitude,setLongitude]=useState<any>()
  navigator.geolocation.getCurrentPosition(function(position) {
    // console.log("Latitude is :", position.coords.latitude);
    // console.log("Longitude is :", position.coords.longitude);
    setLongitude(position.coords.longitude);
    setLatitude(position.coords.latitude)
  });
  const { Link } = Anchor;
  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 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 getProjectSubContractors= (projectId:Number) => {  
    subContractorService.getProjectSubcontractors(projectId).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 getAttendance= () => {
    setShowAttendanceForm(true);
    setShowOtForm(false);
    getEmployeeAttendance();
  }
  const setLoginUserid=()=>{
    setUserid(JSON.parse(localStorage.getItem('userid')));
    setUserRole(JSON.parse(localStorage.getItem('role')));
  }
  useEffect(() => {getAllProjects();getAllSubContractors();setLoginUserid();}, [])
    // 
  // const getEmployees=()=>{
  //   setShowAttendanceForm(true);
  //   projectMappingService.getEmployeesByProjectId(selectedProject).then(res => {
  //     if (res.status) {setEmployeesData(res.data);
  //     } else {
  //       if (res.intlCode) {
  //         setEmployeesData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //        AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setEmployeesData([]);
  //   })
  // }

  const handleProject = (value) => {
    console.log(`selected ${value}`);
    setSelectedProject(value);
    getProjectSubContractors(value);

  }
  const handleSubContractor=(value)=>{
    setSelectedSubContractor(value);
  }
  const handleAttendance=(record,value)=>{
    console.log(record.attenCreatedUser);
    record.attenCreatedUser=JSON.parse(localStorage.getItem('userid'));
    record.latitude=latitude;
    record.longitude=longitude;
    attendanceService.saveAttendance(record,value).then(res => {
      if (res.status) {
        getEmployeeAttendance();
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const handleAttendanceApproval=(record:AttendanceDto)=>{
    record.attenApprovalStatus=record.attenApprovalStatus?false:true;
    attendanceService.handleAttendanceApproval(record).then(res => {
      if (res.status) {
        getEmployeeAttendance();
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  
  const onBlur=() =>{
    console.log('blur');
  }
  
  const handleOthoursApproval=(record:AttendanceDto)=>{
    record.otApprovalStatus=record.otApprovalStatus?false:true;
    attendanceService.handleOthoursApproval(record).then(res => {
      if (res.status) {
        getAttendance();
        // handleOtForm();
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  // console.log(JSON.parse(localStorage.getItem('userid')));
  const getEmployeeAttendance=async ()=>{
    // await attendanceService.getAttendance(selectedProject,new Date()).then(res => {
      setAttendanceData([]);
      await attendanceService.getAttendance(selectedProject,new Date(),selectedSubContractor).then(res => {
      if (res.status) {
        console.log(res.data);
        console.log(res.otdata);
        console.log(res.data[0].projectsInfo.otType);
        console.log(new Date().getHours());
        setAttendanceData(res.data);
        if(res.data[0].projectsInfo.otType=='SameDay' && new Date().getHours()<=23){
          setOtData(res.otdata);
        }else
        if(res.data[0].projectsInfo.otType=='NextDay' && new Date().getHours()<=8){
          setOtData(res.otdata);
        }else{
          setOtData([]);
        }
      } else {
        if (res.intlCode) {
          setAttendanceData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setAttendanceData([]);
    })
  }
  
  
  const handleOthours=(e:any,record:AttendanceDto) =>{
    if(e){
      record.otHours=e;
    }else{
      record.otHours=0;
    }
    record.otCapturedTime=(new Date()).toString();
    attendanceService.handleOthours(record).then(res => {
      if (res.status) {
        // getEmployeeAttendance();
        getAttendance();
        handleOtForm();
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  
  const onFocus=() =>{
    console.log('focus');
  }
  
  const onSearch=(val)=> {
    console.log('search:', val);
  }
  const handleOtForm=()=> {
    setShowOtForm(true);
    setShowAttendanceForm(false);
  }
  const handleOtBulkApproval=async (attendanceIds:Number[])=>{
    // console.log('attendanceIds');
     if(attendanceIds.length>0){
      await attendanceService.handleOtBulkApproval(attendanceIds).then(res => {
        if(res){
         getAttendance();
         handleOtForm();
         AlertMessages.getSuccessMessage('Approved Successfully');
        }else{
           AlertMessages.getWarningMessage('Something wrong');
        }
       }).catch(err => {
         AlertMessages.getErrorMessage(err.message);
         setAttendanceData([]);
       })
     }else{
       AlertMessages.getErrorMessage('Please select employees to approve');
     }    
  }
  const handleBulkApproval=async (attendanceIds:Number[])=>{
    // console.log('attendanceIds');
     if(attendanceIds.length>0){
      await attendanceService.handleAttendanceBulkApproval(attendanceIds).then(res => {
        if(res){
         getAttendance();
         AlertMessages.getSuccessMessage('Approved Successfully');
        }else{
           AlertMessages.getWarningMessage('Something wrong');
        }
       }).catch(err => {
         AlertMessages.getErrorMessage(err.message);
         setAttendanceData([]);
       })
     }else{
       AlertMessages.getErrorMessage('Please select employees to approve');
     }    
  }
  const handleAttendanceForm=()=> {
    setShowOtForm(false);
    setShowAttendanceForm(true);
  }
  const submitAttendance=async()=>{
    await attendanceService.submitAttendance(selectedProject,selectedSubContractor).then(res => {
      if(res){
       getAttendance();
       handleOtForm();
       AlertMessages.getSuccessMessage('Ot Submitted Successfully');
      }else{
         AlertMessages.getWarningMessage('Something wrong');
      }
     }).catch(err => {
       AlertMessages.getErrorMessage(err.message);
     })
  }
  const submitOt=async()=>{
    await attendanceService.submitOt(selectedProject,selectedSubContractor).then(res => {
      if(res){
       getAttendance();
       AlertMessages.getSuccessMessage('Approved Successfully');
      }else{
         AlertMessages.getWarningMessage('Something wrong');
      }
     }).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>
    <br></br>
    <Row gutter={[32,64]} style={{margin:'-32px -16px -11px'}}>
      <Col style={{padding:'2% 2% 2% 2%'}}>
          <Select
           showSearch
           style={{ width: 200 }}
           placeholder="Select Project"
           optionFilterProp="children"
           onChange={handleProject}
           onFocus={onFocus}
           onBlur={onBlur}
           onSearch={onSearch}
           filterOption={(input, option) =>
             option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
           }
        >
          {projectsData.map((project)=>{
            return <Option key={project.projectId} value={project.projectId}>{project.projectName}</Option>
          })}
        </Select>
      </Col>
      <Col style={{padding:'2% 2% 2% 2%'}}>
          <Select
         showSearch
         style={{ width: 200 }}
         placeholder="Select a person"
         optionFilterProp="children"
         onChange={handleSubContractor}
         onFocus={onFocus}
         onBlur={onBlur}
         onSearch={onSearch}
         filterOption={(input, option) =>
           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }
        >
          <Option key='0' value='0'>GTPL</Option>
          {subContractorsData.map((subcontractor)=>{
            return <Option key={subcontractor.subContractorId} value={subcontractor.subContractorId}>{subcontractor.subContractorName}</Option>
          })}
        </Select>
        
      </Col>
      <Col style={{padding:'2% 2% 2% 2%'}}>
        <Button type="primary" onClick={getAttendance}>
          Get Employees
        </Button>
      </Col>
    </Row>
      {
        showAttendanceForm &&  <Card  bodyStyle={{ overflow: 'auto' }}  title="Attendance" extra={<Button  onClick={handleOtForm}>OT Creation</Button>}>
        <AttendanceForm formData={attendanceData} updateAttendance={handleAttendance} handleBulkApproval={handleBulkApproval} submitAttendance={submitAttendance} updateApprovalStatus={handleAttendanceApproval} userRole={userRole} />
        </Card>
      }
      {/* {
        userRole==='L3' && showAttendanceForm &&  <Card  bodyStyle={{ overflow: 'auto' }}  title="Attendance" >
        <AttendanceApproval formData={attendanceData} handleBulkApproval={handleBulkApproval} userRole={userRole} />
        </Card>
      } */}
      {
        showOtForm &&  <Card  bodyStyle={{ overflow: 'auto' }} title="Ot Hours" extra={<><Button  onClick={handleAttendanceForm}>Attendance Creation</Button></>}>
        <OtCreationForm formData={otData} updateOtHours={handleOthours} handleOtBulkApproval={handleOtBulkApproval} submitOt={submitAttendance} updateOtApprovalStatus={handleOthoursApproval} userRole={userRole}/>
        </Card>
      }
      </>
      ): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
    </>
  );
};

export default AttendancePages;