import './style.css';
import { 
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';
import { Chart } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend
);

function toCleanTitleCase(str) {
    return str
        .replace(/[_-]/g, ' ')  // Replace underscores and hyphens with spaces
        .replace(
            /\w\S*/g,
            (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
        );
}

const chartAreaBorder = {
    id: 'chartAreaBorder',
    beforeDraw(chart, args, options) {
        const {ctx, chartArea: {left, top, width, height}} = chart;
        ctx.save();
        ctx.strokeStyle = options.borderColor;
        ctx.lineWidth = options.borderWidth;
        ctx.setLineDash(options.borderDash || []);
        ctx.lineDashOffset = options.borderDashOffset;
        ctx.strokeRect(left, top, width, height);
        ctx.restore();
    }
};

export default function StatsChart({ links }) {
    const options = {
        responsive: true,
        animation: false,
        interaction: {
            mode: null,
            intersect: false,
        },
        plugins: {
            tooltip: {
                enabled: false
            },
            legend: {
                display: false,
                position: 'top',
            },
            title: {
                display: true,
                text: 'Stats',
                font: {
                    family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
                    weight: 'bold',
                    size: 17,
                    color: 'black',
                    lineHeight: 1.2,
                }
            },
            chartAreaBorder: {
                borderColor: 'black',
                borderWidth: 1,
                borderDash: [0, 0],
                borderDashOffset: 0,
            },
        },
        scales: {
            x: {
                border: { display: false },
                grid: { display: false },
                ticks: { 
                    color: 'black', 
                    font: { size: 15 }
                }
            },
            y: {
                border: { display: false },
                grid: { display: false},
                ticks: { 
                    color: 'black',
                    font: { size: 15 }
                }
            }
        },
        maintainAspectRatio: true,
        aspectRatio: 1 | 1,
    }

    const labels = [
        "Overall",
        ...links.map(item => toCleanTitleCase(item.id))
    ];

    const data = {
        labels,
        datasets: [
            {
                label: "Stats",
                data: [
                    links.length,
                    ...Array.from(
                    { length: labels.length },
                    () => Math.floor(Math.random() * (links.length -1)) + 1
                )],
                backgroundColor: ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD'],
            }
        ],
    }
    return (
        <div class="chart-container">
            <Chart type="bar" options={options} data={data} plugins={[chartAreaBorder]} />
        </div>
    );
}
