/**
 * @file ChartComponent.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {
    CategoryScale,
    Chart as ChartJS,
    Legend,
    LinearScale,
    LineElement,
    PointElement,
    Title,
    Tooltip,
} from 'chart.js';
import {Line} from 'react-chartjs-2';
import {Paper} from '@mui/material';
import zoomPlugin from 'chartjs-plugin-zoom';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
    zoomPlugin
  );


//title | dates[] | entries[] | lineColor[] | label[]
function ChartComponent(props) {
    let options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: props.title,
            },
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x',
                    onPanStart({chart, point}) {
                        const area = chart.chartArea;
                        if (area.left > point.x || area.right < point.x
                            || area.top > point.y || area.bottom < point.y) {
                            return false;
                        }
                    },
                },
                zoom: {
                    pinch: {
                        enabled: true,
                    },
                    wheel: {
                        enabled: true,
                    },
                    onZoomStart({chart, point}) {
                        const area = chart.chartArea;
                        debugger;
                        if (area.left > point.x || area.right < point.x
                            || area.top > point.y || area.bottom < point.y) {
                            return false;
                        }
                    },
                    mode: 'x',
                }
            },
        },
    };

    if (props.isPercent) {
        options["scales"] = {
            y: {
                min: 0,
                max: 100
            }
        }
    }

    let legendSet = new Set();
    let datasets = [];
    for (let i = 0; i < props.data.length; i++) {
        let dataset = {
            label: props.label[i],
            data: props.data[i].data,
            borderColor: props.lineColor[i]
        };
        props.data[i].legend?.forEach((date) => legendSet.add(date));
        datasets.push(dataset);
      }

    let data = {
        labels: Array.from(legendSet).map(d => new Date(d).toLocaleString([], {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        })),
        datasets: datasets
      };

    return (
        <Paper elevation={3} sx={{height: "100%", width: "100%"}}>
            <Line options={options} data={data}/>
        </Paper>
    )
}

export default ChartComponent;