import ChartDataLabels from 'chartjs-plugin-datalabels';
import Chart from 'chart.js/auto';

Chart.register(ChartDataLabels);
window.Chart = Chart;
window.filamentChartJsPlugins ??= [];

if (!window.filamentChartJsPlugins.includes(ChartDataLabels)) {
    window.filamentChartJsPlugins.push(ChartDataLabels);
}

// window.filamentChartJsPlugins.push(ChartDataLabels);

// Chart.defaults.plugins.datalabels = {
//     anchor: 'end',
//     align: 'right',
//     color: '#000',
//     font: {
//         weight: 'bold',
//         size: 11,
//     },
//     formatter: (value) => `${value} min`,
//     backgroundColor: function (context) {
//         const value = context.dataset.data[context.dataIndex];
//         return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
//     },
// };

// Set global datalabel options
// ChartDataLabels.defaults.anchor = 'end'; // or 'start', 'center', etc.
// ChartDataLabels.defaults.align = 'right'; // or 'left', 'top', 'bottom', etc.
// // // Conditionally set backgroundColor
// ChartDataLabels.defaults.backgroundColor = function(context) {
//     const value = context.dataset.data[context.dataIndex];
//     return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
// };

// // // Conditionally set borderRadius
// ChartDataLabels.defaults.borderRadius = function(context) {
//     const value = context.dataset.data[context.dataIndex];
//     return Number(value) !== 0 ? 8 : 0;
// };

// Conditionally set padding
// ChartDataLabels.defaults.padding = function(context) {
//     const value = context.dataset.data[context.dataIndex];
//     return Number(value) !== 0 ? 6 : 0;
// };

// // // Conditionally set color
// ChartDataLabels.defaults.color = function(context) {
//     const value = context.dataset.data[context.dataIndex];
//     return Number(value) !== 0 ? '#28a745' : 'transparent';
// };

//  // Conditionally set font
// ChartDataLabels.defaults.font = function(context) {
//     const value = context.dataset.data[context.dataIndex];
//     return Number(value) !== 0 ? { weight: 'bold', size: 14 } : { size: 0 };
// };


// ChartDataLabels.defaults.formatter = function(value, context) {
//     if (Number(value) === 0){
//         return '';
//     }
//     return 'Count: ' + value;
// };


// const ctx = document.getElementById('hourly-production');
// if (ctx && window.hourlyProductionData && window.hourlyProductionData.labels.length)
//  {
//     new Chart(ctx.getContext('2d'), {
//         type: 'line',
//         data: window.hourlyProductionData,
//         options: {
//             plugins: {
//                 datalabels: {
//                     anchor: 'end',
//                     align: 'right',
//                     backgroundColor: function(context) {
//                         const value = context.dataset.data[context.dataIndex];
//                         return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
//                     },
//                     borderRadius: function(context) {
//                         const value = context.dataset.data[context.dataIndex];
//                         return Number(value) !== 0 ? 8 : 0;
//                     },
//                     padding: function(context) {
//                         const value = context.dataset.data[context.dataIndex];
//                         return Number(value) !== 0 ? 6 : 0;
//                     },
//                     color: function(context) {
//                         const value = context.dataset.data[context.dataIndex];
//                         return Number(value) !== 0 ? '#28a745' : 'transparent';
//                     },
//                     font: function(context) {
//                         const value = context.dataset.data[context.dataIndex];
//                         return Number(value) !== 0 ? { weight: 'bold', size: 14 } : { size: 0 };
//                     },
//                     formatter: function(value, context) {
//                         if (Number(value) === 0){
//                             return '';
//                         }
//                         return 'Count: ' + value;
//                     }
//                 }
//             }
//         },
//         plugins: [ChartDataLabels]
//     });
// }
// else {
//     console.log('No data available for the chart.');
// }