import React, { useState, useEffect } from 'react';
import { Button, Card, Drawer, Form, Row, Col, Alert, Select, DatePicker } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { useIntl, FormattedDate} from 'react-intl'
import { render } from 'react-dom';
import { CostcenterService, EmployeeService, ProjectService,AttendanceService } from '@gtpl/shared-services/attendance';
import { CostCentersDto, ProjectsDto, EmployeeDto} from '@gtpl/shared-models/gtpl';

import './employeewise-attendance-report-pages.css';
const { Option } = Select;

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

export function EmployeewiseAttendanceReportPages(props: IEmployeewiseAttendanceReportPagesProps
) {
  const [form] = Form.useForm();
  const projectService = new ProjectService;
  const employeeService = new EmployeeService;
  const attendanceService = new AttendanceService;
  const [projectsData, setProjectsData] = useState<ProjectsDto[]>([])
  // const [employeeWiseData, setEmployeeWiseData] = useState<EmployeewiseDto[]>([])
  const [selectedProject, setSelectedProject] = useState<Number>(null)
  const [EmployeesData, setEmployeesData] = useState<EmployeeDto[]>([])
  const [selectedEmployee, setSelectedEmployee] = useState<Number>(null) 
  const [showEmployeewise, setShowEmployeewise] = useState<Boolean>(false)
  // const [selectedEmployeewise, setSelectedEmployeewise] = useState<any>(MonthwiseDtoDefault);

  useEffect(() => { getAllEmployees(); }, [])
  const getAllEmployees = () => {
    employeeService. getAllEmployees().then(res => {
      if (res.status) {
        setEmployeesData(res.data);
      } else {
        setEmployeesData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmployeesData([]);
    })
  }

  const getAllProjects = (costCenterId: number) => {
    projectService.getAllProjectsByCostCenterId(costCenterId).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 handleEmployees = async (value) => {
    // console.log(`selected ${value}`);
    await setProjectsData([]);
    await setSelectedEmployee(value);
    await getAllProjects(value);
    await setSelectedProject(value);
    // await getEmployees();
  }

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

  const onReset = () => {
    form.resetFields();
  };

  function onChange(date, dateString) {
    console.log(date, dateString);
  }

  const viewEmployeewiseReport= () => {
    // const duplicatedReport = JSON.parse(JSON.stringify(MonthwiseDtoDefault));
    setShowEmployeewise(true);
    // getEmployeewiseReport();
    // setSelectedMonthwise(duplicatedReport);
    // getEmployeeAttendance();
  }

  // const getEmployeewiseReport=async ()=>{
  //   // await attendanceService.getAttendance(selectedProject,new Date()).then(res => {
  //     await attendanceService.employeeWiseattendanceReport(selectedEmployeewise).then(res => {
  //     if (res.status) {
  //       setEmployeeWiseData(res.data);
  //     } else {
  //       if (res.intlCode) {
  //         setEmployeeWiseData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //        AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setEmployeeWiseData([]);
  //   })
  // }
  return (
    <>
  <Form form={form} layout={'inline'} >
  {/* <Row gutter={[32, 32]}>
            <Col>
            <Form.Item name="selectMonth"
                label="Select a Month"
                rules={[
                  {
                    required: true,
                  },
                ]}>
            <DatePicker onChange={onChange} picker="month" />
            </Form.Item>
            </Col>
            </Row> */}
            <Row gutter={[32, 32]}>
            <Col>
              <Form.Item
                name="EmployeeId"
                label="Employee"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="Select an Employee"
                  onChange={handleEmployees}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {EmployeesData.map((employee) => {
                    return <Option value={employee.Id}>{employee.empName}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                name="projectId"
                label="Project"
                rules={[
                  {
                    required: false,
                  },
                ]}
              >
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="Select a Project"
                  onChange={handleProject}
                  filterOption={(input, option) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {projectsData.map((project) => {
                    return <Option value={project.projectId}>{project.projectName}</Option>
                  })}
                </Select>
              </Form.Item>
            </Col>
           
            <Row gutter={[32, 32]}>
            <Col>
              <Form.Item >
              <Button type="primary" onClick={() => { viewEmployeewiseReport() }}>
            Get Report
          </Button>
                <Button htmlType="button" onClick={onReset}>
                  Reset
          </Button>
  
              </Form.Item>
            </Col>
            </Row>
            </Row>
  </Form >

       
       
  
           {/* { showEmployeewise && <Card  bodyStyle={{ overflow: 'auto' }} title="EMployee wise Report">
    <EmployeewiseReportGrid  viewEMployeewiseReport={viewEmployeewiseReport}  EMployeewiseReportData={employeeWiseData} />
    </Card>} */}
    </>
    )
  } 
  

export default EmployeewiseAttendanceReportPages;