import 'chartjs-adapter-date-fns';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    TimeScale,
    BarElement,
    Tooltip,
    Legend,
    type ChartData,
    type ChartOptions,
} from 'chart.js';
import { type FC, useState, useEffect } from 'react';
import { Bar } from 'react-chartjs-2';

import { Spinner } from './Spinner';

type BarPlotProps = {
    data: ChartData<'bar'>;
    options?: ChartOptions<'bar'>;
    description?: string;
    emptyCount?: number;
};

const MAX_LABEL_LENGTH = 12;

export const BarPlot: FC<BarPlotProps> = ({ data, options, description, emptyCount }) => {
    const [isRegistered, setIsRegistered] = useState(false);

    useEffect(() => {
        ChartJS.register(CategoryScale, LinearScale, TimeScale, BarElement, Tooltip, Legend);
        setIsRegistered(true);
    }, []);

    if (!isRegistered)
        return (
            <div className='flex items-center justify-center h-48'>
                <Spinner />
            </div>
        );

    return (
        <div>
            <Bar
                data={data}
                options={{
                    devicePixelRatio: 2,
                    plugins: {
                        legend: {
                            display: false,
                        },
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(0, 0, 0, 0)',
                            },
                            ticks: {
                                callback: function (value) {
                                    const label = this.getLabelForValue(value as number);
                                    return label.length > MAX_LABEL_LENGTH
                                        ? label.slice(0, MAX_LABEL_LENGTH) + '...'
                                        : label;
                                },
                            },
                        },
                    },
                    ...options,
                }}
            />
            {description && <p className={`text-sm text-center ml-6 mt-3 text-gray-500`}>{description}</p>}
            {emptyCount !== undefined && emptyCount > 0 && (
                <p className={`text-sm text-center ml-6 mt-1 text-gray-500`}>
                    {emptyCount} entr{emptyCount === 1 ? 'y' : 'ies'} with missing values
                </p>
            )}
        </div>
    );
};
