import React, { useState,useEffect } from 'react';
import { Button, Card, Drawer, Form, Row, Col, Alert, Select, DatePicker, Anchor,Spin  } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import './projects-report-pages.css';
import { ProjectsReportGrid } from '@gtpl/pages/attendance-management/attendance-management-components/projects-report-grid';
import { ProjectsReport, ProjectsReportDtoDefault } from '@gtpl/shared-models/gtpl';
import { AttendanceService } from '@gtpl/shared-services/attendance';


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

export function ProjectsReportPages(
  props: ProjectsReportPagesProps
) {
  const [form] = Form.useForm();
  const { Link } = Anchor;
  const [projectsData, setProjectsData] = useState<ProjectsReport[]>([])
  const [ShowProjectsReport, setShowProjectsReport] = useState<Boolean>(false)
  const [selectedProjects, setSelectedProjects] = useState<any>(ProjectsReportDtoDefault);

  const [selectedMonth, setSelectedMonth]= useState('');
  const attendanceService = new AttendanceService;

  const viewProjectsReport= (projectsData: ProjectsReport, viewOnly: boolean = true) => {
    // const duplicatedReport = JSON.parse(JSON.stringify(MonthwiseDtoDefault));
    setShowProjectsReport(true);
    getProjectsReport(selectedMonth);
    setSelectedProjects(projectsData);
    // getEmployeeAttendance();
  }
  const handleChange=(value) =>{
    console.log(value.format('YYYY-MM'));
    setSelectedMonth(value.format('YYYY-MM'))
  }
  
  const onReset = () => {
    form.resetFields();
  };
  
const getProjectsReport=async (reqDate)=>{
  // await attendanceService.getAttendance(selectedProject,new Date()).then(res => {
    await attendanceService.projectsReport({selectedMonth:reqDate}).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 [loading, setLoading] = useState(true)

useEffect(() => {
  setTimeout(() => setLoading(false), 1000)
}, [])
  return (
    <>
     {loading === false ? (
    <><Anchor affix={false}>
          <Link href="#/dashboard" title="Dashboard" />
        </Anchor>
          <Card title="Projects Report" style={{ padding: '0px' }}>
            <Form form={form} layout={'inline'} style={{ padding: '0px' }} onFinish={viewProjectsReport}>
              <Row gutter={[32, 32]}>
                <Col>
                  <Form.Item name="selectYear"
                    label="Select Year"
                    rules={[
                      {
                        required: true,
                        message: "Select Year"
                      },
                    ]}>
                    <DatePicker onChange={handleChange} picker="month" />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[32, 32]}>
                <Col>
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      Get Report
                    </Button>
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item>
                    <Button htmlType="button" onClick={onReset}>
                      Reset
                    </Button>

                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
  
           { ShowProjectsReport && <Card  bodyStyle={{ overflow: 'auto' }}>
    <ProjectsReportGrid  viewProjectsReport={viewProjectsReport}  ProjectsReportData={projectsData} />
    </Card>}</>
    ): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
      </>
    )
}

export default ProjectsReportPages;