import { useEffect, useState } from 'react';

import { BinWeights, getAggregateBinWeights } from '@/app/lib/data/dashboard';
import { binToLabel } from '@/app/lib/bin.enum';

import { BarChart } from './BarChart/BarChart';

export function AggregateBinWeightsChart() {
    const [binWeights, setBinWeights] = useState<BinWeights>({} as BinWeights);

    useEffect(() => {
        async function fetchData() {
            const binWeights = await getAggregateBinWeights();
            setBinWeights(binWeights);
        }
        fetchData();
    }, []);

    return (
        <BarChart 
            data={{
                labels: Object.keys(binWeights).map((k) => binToLabel(parseInt(k))),
                datasets: [{ data: Object.values(binWeights) }],
            }}
            opts={{ 
                plugins: { 
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: (context) => `${context.formattedValue} lbs`,
                        },
                    },
                },
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            callback: (value: string | number) => `${value} lbs`,
                        },
                    },
                },
            }}
            title='Aggregate Bin Weights'
        />
    );
}