import { ILineGraphProps } from "./AggregatedJobsLineChart.types";
import { Paper, makeStyles } from "@material-ui/core";
import { useCallback, useEffect, useState,useRef } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { toast } from "react-toastify";
import { Company } from "../../../Api/Company/Company";
import { setLoader } from "../../../Redux/Loader/actions";
import {formatShortDate} from '../../../Utilities/DateTime'
import colorLib from '@kurkle/color';
import Chart from 'chart.js'

const useStyles = makeStyles(() => ({
    paper: {
    
        // position: 'relative'
    },
    canvas: {
        // margin: '0',
        // position: 'absolute',
        // top: '50%',
        // left: '50%',
        // transform: 'translate(-50%, -50%)'
    }
}))

const companyApi = new Company()

function AggregatedJobsLineChart(props: ILineGraphProps , data : any) {
    const classes = useStyles(props)
    const dispatch = useDispatch()
    const canvasRef = useRef(null)
    

    const [t] = useTranslation('CompanyRankingTable')
    const [labels , setLabels] = useState<string[]>([])
    const [emptyPark , setEmptyPark] = useState<number[]>([])
    const [fullTruck , setFullTruck] = useState<number[]>([])
    const [looseCargo , setLooseCargo] = useState<number[]>([])
    const [other     , setOther] = useState<number[]>([])
    const [rail     , setRail] = useState<number[]>([])
    const [wharf     , setWharf] = useState<number[]>([])

    const getJobs = useCallback(() => {
        dispatch(setLoader(true))
        companyApi.getAggregatedJobs('completed')
            .then(response => {
                const dailyJobs =response.data['dailyJobs']
                let labelArray :string[] = []
                let emptyParkArray :number[] = []
                let looseCargoArray :number[] = []
                let fullTruckArray :number[] = []
                let otherArray :number[] = []
                let railArray :number[] = []
                let wharfArray :number[] = []

                dailyJobs.forEach((element : any) => {
                    labelArray.push(formatShortDate(element['date']))
                    emptyParkArray.push(element['empty_park'] || 0)
                    fullTruckArray.push(element['full_truck_load'] || 0)
                    looseCargoArray.push(element['loose_cargo'] || 0)
                    otherArray.push(element['other'] || 0)
                    railArray.push(element['rail'] || 0)
                    wharfArray.push(element['wharf'] || 0)
                })

                setLabels(labelArray)
                setEmptyPark(emptyParkArray)
                setFullTruck(fullTruckArray)
                setLooseCargo(looseCargoArray)
                setOther(otherArray)
                setRail(railArray)
                setWharf(wharfArray)
                dispatch(setLoader(false))
            })
            .catch(err => {
                console.log(`err`, err)
                toast.error(t('error_getting_jobs'))
                dispatch(setLoader(false))
            })
    }, [dispatch,t])

    const transparentize = (value : any, opacity:any) => {
        var alpha = opacity === undefined ? 0.5 : 1 - opacity;
        return colorLib(value).alpha(alpha).rgbString();
      }
      
    const mapChart =()=>{
        let chart: Chart | undefined

        if (canvasRef.current) {
            chart = new Chart(canvasRef.current || '', {
                type: 'line',
                
                data: {
                    labels: labels,
                    datasets: [{
                        label: t('empty_park'),
                        data: emptyPark,
                        lineTension: 0,
                        borderColor: 'blue',
                        backgroundColor : transparentize('blue' , 0.5)
                        
                    },
                    {
                        label: t('full_truck'),
                        data:fullTruck,
                        lineTension: 0,
                        borderColor: 'orange',
                        backgroundColor : transparentize('orange' , .5)

                    },
                    {
                        label: t('loose_cargo'),
                        data: looseCargo,
                        lineTension: 0,
                        borderColor: 'gray',
                        backgroundColor : transparentize('gray' , .5)

                    },
                    {
                        label: t('other'),
                        data: other,
                        lineTension: 0,
                        borderColor: 'yellow',
                        backgroundColor : transparentize('yellow' , .5)

                    },
                    {
                        label: t('rail'),
                        data: rail,
                        lineTension: 0,
                        borderColor: 'lightblue',
                        backgroundColor : transparentize('lightblue' , .5)

                    },
                    {
                        label: t('wharf'),
                        data: wharf,
                        lineTension: 0,
                        borderColor: 'green',
                        backgroundColor : transparentize('green' , .5)

                    },
                ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    responsive: true,
                    // tooltips: {

                    //     callbacks: {
                    //         label: () => '',
                    //         title: () => ''
                    //     }
                    // }
                }
            })
            
        }
        return () => {
            chart?.destroy()
        }
    }

    useEffect(() => {
        mapChart()
    }, [labels, emptyPark , fullTruck , looseCargo ,other , rail,wharf  ])
  
    useEffect(() => {
        getJobs()
    }, [getJobs])
   
    return (
        <Paper className={classes.paper} >
            <canvas className={classes.canvas} ref={canvasRef} />
        </Paper>
    )
}


export default AggregatedJobsLineChart