"use client";
import {Bar} from "react-chartjs-2";

import prisma from "@lib/prisma";

import Head from 'next/head'

import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
    Filler,
} from "chart.js";

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

interface IPower {
    date: string,
    value: number
}

interface IChart {
    labels : string[],
    datasets: [
        {
            label: string,
            data: number[],
            fill: true,
            backgroundColor: string,
            borderColor: string,
        },
    ],
}

export default async function Results() {
    const grades = await prisma.grade.findMany()
    const gradesArray = grades.map(grade => grade.grade.toString())
    const allGrades = ["1", "1,5", "2", "2,5", "3", "3,5", "4", "4,5", "5", "5,5", "6"]
    const gradesCount = allGrades.map(grade => gradesArray.filter(g => g === grade).length)
    console.log(allGrades)
    console.log(gradesCount)

    const options = {
        responsive: true,
        plugins: {
            legend: {
                position: 'top' as const,
            },
            title: {
                display: true,
                text: 'Energy Production/Consumption',
            },
        },
    };

    return (
        <>
            <Head>
                <title>Solar</title>
                <meta name="description" content="Generated by create next app" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                { gradesCount ?
                    <>
                        {console.log("datas", gradesArray)}
                        <Bar data={gradesCount} width={100} height={40} options={options}/>
                    </>
                    : null
                }
            </main>
        </>
    )
}
