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

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


function DonutGraph(props: IDonutGraphProps) {
    const canvasRef = useRef(null)
    const classes = useStyles(props)

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

        if (canvasRef.current) {
            chart = new Chart(canvasRef.current || '', {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [10, 20, 30],
                        backgroundColor: ['red', 'yellow', 'blue']
                    }],


                    labels: [
                        'Red',
                        'Yellow',
                        'Blue'
                    ]
                },
                options: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: 'Custom Chart Title',
                        fontSize: 20
                    }
                }
            })
        }

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


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

export default DonutGraph