import React, { useEffect, useState } from 'react';
import { Card, Divider, Layout, Row, Table } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import './subcontractors.css';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import {LibSubContractorsPaymentsDto} from '@gtpl/shared-models/gtpl';
import { SubContractorPaymentsService, SubContractorService } from '@gtpl/shared-services/attendance'
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';

/* eslint-disable-next-line */
export interface SubcontractorsProps {
  subContractorsPaymentsData:LibSubContractorsPaymentsDto[];
  subContractorsData:string[];
  employeesData:number[];
  attendanceData:number[];
}

export function Subcontractors(
  props: SubcontractorsProps
) {
  // const subContractorsPaymentsService = new SubContractorPaymentsService;
  // const subContractorService = new SubContractorService;
  // const [subContractorsPaymentsData, setsubContractorsPaymentsData] = useState<LibSubContractorsPaymentsDto[]>([])
  // const [subContractorsData, setsubContractorsData] = useState<string[]>([])
  // const [employeesData, setEmployeesData] = useState<number[]>([])
  // const [attendanceData, setAttendanceData] = useState<number[]>([])

  // useEffect(() => {getRecentFiveSubcontractorsPayments(); getSubContractorWiseEmployees(props.selectedDate);}, [])

  // const getSubContractorWiseEmployees= (reqDate) => {
  //   subContractorService.getSubContractorWiseEmployees({assigneddate:reqDate}).then(res => {
  //     console.log(res);
  //     if (res.status) { 
  //       const employeesData: number[] = res.data[0].employeesData;
  //       const attendanceData: number[] = res.data[0].attendanceData;
  //       const subContractorsData: string[] = res.data[0].subContractorsData;
  //       console.log(attendanceData);
  //       // console.log(attendanceData);
  //       setsubContractorsData(subContractorsData);
  //       setEmployeesData(employeesData);
  //       setAttendanceData(attendanceData);
  //     } else {
  //       if (res.intlCode) {
  //         setsubContractorsData([]);
  //         setEmployeesData([]);
  //       setAttendanceData([]);

  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setsubContractorsData([]);
  //     setEmployeesData([]);
  //     setAttendanceData([]);

  //   })
  // }
  // const getRecentFiveSubcontractorsPayments= () => {
  //   subContractorsPaymentsService.getRecentFiveSubcontractorsPayments().then(res => {
  //     console.log(res);
  //     if (res.status) {setsubContractorsPaymentsData(res.data);
  //     } else {
  //       if (res.intlCode) {
  //         setsubContractorsPaymentsData([]);
  //           AlertMessages.getErrorMessage(res.internalMessage);
  //       } else {
  //         AlertMessages.getErrorMessage(res.internalMessage);
  //       }
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //     setsubContractorsPaymentsData([]);
  //   })
  // }
  const constructOptions = (subContractorsData:string[],employeesData:number[],attendanceData:number[]) =>{
    const empDetails = employeesData.map(eachAtt=> {return Number(eachAtt)});
    const attenDetails = attendanceData.map(eachAtt=> {return Number(eachAtt)});
  const options = {
    chart: {
      type: 'column',
    },
    title: {
      text: 'SUB CONTRACTOR WISE EMPLOYEES'
    },
    xAxis: {
      title: {
        text: 'SUB CONTRACTORS'
      },
      // categories: ['ADDURU RAMESH', 'ANAKAPALLI APPALARAJU', 'ANAPA SURYANARAYANA', 'BABBU T SHAH PLASTER OF PARIS', 'BARA BANGARA DEMUDU', 'BHEESETTI SURI BABU']
      categories: subContractorsData
    },
    yAxis: {
      min: 0,
      scrollbar: {
        enabled: true
    },
      title: {
          text: 'EMPLOYEES & ATTENDANCE'
      },
      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>SUB CONTRACTOR: {point.x}</b><br/>',
          pointFormat: '{series.name}: {point.y}', 
      },
      plotOptions: {
          column: {
              // stacking: 'normal',
              dataLabels: {
                  enabled: true
              },
              maxPointWidth: 40
          }
      },
    series: [{
      name: 'Employees',
      data: empDetails
      },{
        name: 'Attendance',
        data: attenDetails
      }]
  };
  return options;
  }

  const sampleTypeColumns: ColumnProps<any>[] = [
    
    {
      title: 'Sub Contractors Name',
      dataIndex: 'subContractor',
    },
    {
      title: 'Payment Date',
      dataIndex: 'paymentDate',
    },
    {
      title: 'Paid Date',
      dataIndex: 'paidDate',
    },
  ]
  return (
    <>
    <div className='scrollable'>
    <Layout style={{padding:10, backgroundColor:'#f5f5f5' }}>


    {((JSON.parse(localStorage.getItem('role'))==='L4')||(JSON.parse(localStorage.getItem('role'))==='L3')) &&
      <div style={{backgroundColor:'#f5f5f5' }}>
      <Card title= "Sub Contractors Payments" style={{backgroundColor:'#108ee9',height:50  }} extra={<a href="#/employeespaymentstatus" style={{color:'white'}}>More</a> } ></Card>
      <Table
        rowKey={record => record.CostcenterId}
        columns={props.subContractorsPaymentsData.length>0?sampleTypeColumns:null}
        dataSource={props.subContractorsPaymentsData}
        // bordered
      />
      </div>
    }

     <HighchartsReact key={Date.now()} highcharts={Highcharts} options={constructOptions(props.subContractorsData,props.employeesData,props.attendanceData)} />

    </Layout>
    </div>
    </>
  );
}

export default Subcontractors;