import React, { useEffect, useState } from 'react';
import { Card, Col, Divider, Row, Table } from 'antd';
// import './dashboard-projects.css';
import { ColumnProps } from 'antd/lib/table';
import { ProjectMappingDto, ProjectWiseEmployeeAttendance } from '@gtpl/shared-models/gtpl';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Layout from 'antd/lib/layout/layout';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import { ProjectMappingService, ProjectService } from '@gtpl/shared-services/attendance'
import HighchartsExporting from 'highcharts/modules/exporting'
/* eslint-disable-next-line */
export interface DashboardProjectsProps {
  // selectedDate:string;
  projectTransfersData:ProjectMappingDto[];
  projectsListData:string[];
  employeesCountData:number[];
  attendanceCountData:number[];
}

export function DashboardProjects(
  props: DashboardProjectsProps
) {
  // const [projectTransfersData, setProjectTransfersData] = useState<ProjectMappingDto[]>([])
  // const [projectsListData, setProjectsListData] = useState<string[]>([])
  // const [employeesCountData, setEmployeesCountData] = useState<number[]>([])
  // const [attendanceCountData, setAttendanceCountData] = useState<number[]>([])

  // const service = new ProjectMappingService;
  // const project = new ProjectService;

  // useEffect(() => {getRecentProjectTransfers(props.selectedDate); getProjectWiseEmpsAndAttendance(props.selectedDate); }, [])
  // const date:string = props.selectedDate;
  // const getRecentProjectTransfers= (reqDate) => {
  //   service.getRecentProjectTransfers({assigneddate:reqDate}).then(res => {
  //     // console.log(res);
  //     if (res.status) {setProjectTransfersData(res.data);
  //       console.log((res.data).length);
  //     } else {
  //       if (res.intlCode) {
  //         setProjectTransfersData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setProjectTransfersData([]);
  //   })
  // }
  // const getProjectWiseEmpsAndAttendance= (reqDate) => {
  //   console.log(reqDate)
  //   project.getProjectWiseEmpsAndAttendance({assigneddate:reqDate}).then(res => {
  //     console.log(res);
  //     if (res.status) { 
  //       const projectsList: string[] = res.data[0].projectsList;
  //       const EmployeesList: number[] = res.data[0].employeesCount;
  //       const AttendanceList: number[] = res.data[0].attendanceCount;
  //       console.log(res.data[0].projectsList);
  //       console.log(res.data[0].employeesCount);
  //       console.log(res.data[0].attendanceCount);
  //       // setProjectsListData(projectsList);
  //       setProjectsListData(projectsList);
  //       console.log('projectsListData');
  //       console.log(projectsListData);

  //       setEmployeesCountData(EmployeesList);
  //       setAttendanceCountData(AttendanceList);
  //     } else {
  //       if (res.intlCode) {
  //         setProjectsListData([]);
  //       setEmployeesCountData([]);
  //       setAttendanceCountData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setProjectsListData([]);
  //       setEmployeesCountData([]);
  //       setAttendanceCountData([]);

  //   })
  // }
  
  const constructOptions = (projectsListInfo:string[],employeesInfo:number[],attendanceInfo:number[]) =>{
     const empDetails = employeesInfo.map(eachEmp=> {return Number(eachEmp)});
     const attDetails = attendanceInfo.map(eachAtt=> {return Number(eachAtt)});
    const options = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Project Wise Employees VS Attendance'
      },
      xAxis: {
        title: {
          text: 'PROJECTS'
        },
        // categories: ['AMC TANKS', 'CORPUS FUND', 'DGNP - SDD PH', 'ECOR - RYD', 'IOCL - 3 CRUDE TANKS', 'IOCL - PAINTING']
        categories: projectsListInfo
      },
      yAxis: {
        min: 0,
        title: {
            text: 'Attendance VS Employees'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: ( // theme
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>PROJECT: {point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>'
            // Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                // stacking: 'normal',
                dataLabels: {
                    enabled: true
                },
                maxPointWidth: 40
            }
        },
      series: [{
        name: 'Employees',
        data: empDetails
        }, {
            name: 'Attendance',
            data: attDetails
        }],
        exporting: {
          enabled: true
        } 
    };
    return options;
  }
  if (typeof Highcharts === 'object') {
    HighchartsExporting(Highcharts)
  }
  
//   let btn = document.getElementsByClassName('highcharts-exporting-group');

// btn.addEventListener('click', () => {
//   let tableDiv = document.querySelector('.highcharts-data-table');
//   if (tableDiv) {
//     tableDiv.classList.toggle('active');
//   }
// })

  const sampleTypeColumns: ColumnProps<any>[] = [
    {
      title: 'Transfer Date',
      dataIndex: 'transferDate',
    },
    {
      title: 'Project Name',
      dataIndex: 'projectName',
    },
    {
      title: 'Employee Name',
      dataIndex: 'empName',
    },
    {
      title: 'Transfered By',
      dataIndex: 'transferBy',
      render: (text, rowData) => (<>{rowData.userId===0?'Navin':rowData.transferBy}</>),

    },
  ]
  return (
    <>
    <div className='scrollable'>
    <Layout style={{padding:10, backgroundColor:'#f5f5f5' }}>
    {((JSON.parse(localStorage.getItem('role'))==='L4')||(JSON.parse(localStorage.getItem('role'))==='L3')||(JSON.parse(localStorage.getItem('role'))==='L2')||(JSON.parse(localStorage.getItem('role'))==='L1')) &&
      <div style={{backgroundColor:'#f5f5f5' }}>
      {/* <Card title= "Projects" style={{backgroundColor:'#ffbf00' }} extra={<a href="#/projects" style={{color:'white'}}>More</a> } ></Card> */}
      <Card title= "Project Transfers" style={{backgroundColor:'#108ee9',height:50 }} extra={<a href="#/projectmapping" style={{color:'white'}}>More</a> } ></Card>
      <Table
        rowKey={record => record.transferDate}
        columns={props.projectTransfersData.length>0?sampleTypeColumns:null}
        dataSource={props.projectTransfersData}
        // bordered
      />
      </div>
    }
    
     <HighchartsReact key={Date.now()} highcharts={Highcharts} options={constructOptions(props.projectsListData,props.employeesCountData,props.attendanceCountData)} />
    
     </Layout>
     </div>
    </>
  );
}

export default DashboardProjects;