import { Paper, makeStyles } from "@material-ui/core";
import { useEffect, useRef } from "react";
import { ILineGraphProps } from "./LineGraph.types";
import Chart from 'chart.js'

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

function LineGraph(props: ILineGraphProps) {
    const canvasRef = useRef(null)
    const classes = useStyles(props)

    useEffect(() => {
        let chart: Chart | undefined

        if (canvasRef.current) {
            chart = new Chart(canvasRef.current || '', {
                type: 'line',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    legend: {
                        display: false
                    },

                    tooltips: {

                        callbacks: {
                            label: () => '',
                            title: () => ''
                        }
                    }
                }
            })
        }

        return () => {
            chart?.destroy()
        }
    }, [canvasRef])


    return (
        <Paper className={classes.paper} elevation={5}>
            <canvas className={classes.canvas} ref={canvasRef} />
        </Paper>
    )
}


export default LineGraph