/*!
=========================================================
* Argon Dashboard React - v1.2.4
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

// =========================================================
// Chart.js v3+ compatible version - UPDATED
// =========================================================

// Colors
const colors = {
    gray: {
      100: "#f6f9fc",
      200: "#e9ecef",
      300: "#dee2e6",
      400: "#ced4da",
      500: "#adb5bd",
      600: "#8898aa",
      700: "#525f7f",
      800: "#32325d",
      900: "#212529",
    },
    theme: {
      default: "#172b4d",
      primary: "#5e72e4",
      secondary: "#f4f5f7",
      info: "#11cdef",
      success: "#2dce89",
      danger: "#f5365c",
      warning: "#fb6340",
    },
    black: "#12263F",
    white: "#FFFFFF",
    transparent: "transparent",
  };
  
  // Methods
  
  // Chart.js global options
  function chartOptions() {
    const mode = "light";
    
    return {
      plugins: {
        legend: {
          display: false,
        },
        tooltip: {
          mode: "index",
          intersect: false,
        }
      },
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        // New scale configuration format for Chart.js v3+
        y: {
          grid: {
            borderDash: [2],
            borderDashOffset: [2],
            color: mode === "dark" ? colors.gray[900] : colors.gray[300],
            drawBorder: false,
            drawTicks: false,
            zeroLineColor: mode === "dark" ? colors.gray[900] : colors.gray[300],
            zeroLineBorderDash: [2],
            zeroLineBorderDashOffset: [2],
          },
          beginAtZero: true,
          ticks: {
            padding: 10,
            callback: function (value) {
              if (!(value % 10)) {
                return value;
              }
            },
          }
        },
        x: {
          grid: {
            drawBorder: false,
            drawOnChartArea: false,
            drawTicks: false,
          },
          ticks: {
            padding: 20,
          }
        }
      }
    };
  }
  
  // Parse global options
  function parseOptions(Chart, options) {
    // Update defaults for Chart.js v3+
    Chart.defaults.color = colors.gray[600];
    Chart.defaults.font.family = 'Open Sans';
    Chart.defaults.font.size = 13;
    
    // Apply any additional options
    if (options) {
      for (var item in options) {
        if (typeof options[item] !== "object") {
          Chart.defaults[item] = options[item];
        } else {
          parseOptions(Chart.defaults[item], options[item]);
        }
      }
    }
  }
  
  // Example 1 of Chart inside src/views/Index.js (Sales value - Card)
  const chartExample1 = {
    options: {
      scales: {
        y: {
          grid: {
            color: colors.gray[900],
            zeroLineColor: colors.gray[900],
          },
          ticks: {
            callback: function (value) {
              if (!(value % 10)) {
                return "$" + value + "k";
              }
            },
          },
        },
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function (context) {
              var label = context.dataset.label || "";
              var yLabel = context.parsed.y;
              var content = "";
  
              if (context.chart.data.datasets.length > 1) {
                content += label;
              }
  
              content += "$" + yLabel + "k";
              return content;
            },
          },
        },
      },
    },
    data1: {
      labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [
        {
          label: "Performance",
          data: [0, 20, 10, 30, 15, 40, 20, 60, 60],
          borderColor: colors.theme.primary,
          backgroundColor: "rgba(94, 114, 228, 0.1)",
          tension: 0.4,
          fill: true,
        },
      ],
    },
    data2: {
      labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [
        {
          label: "Performance",
          data: [0, 20, 5, 25, 10, 30, 15, 40, 40],
          borderColor: colors.theme.primary,
          backgroundColor: "rgba(94, 114, 228, 0.1)",
          tension: 0.4,
          fill: true,
        },
      ],
    },
  };
  
  // Example 2 of Chart inside src/views/Index.js (Total orders - Card)
  const chartExample2 = {
    options: {
      scales: {
        y: {
          ticks: {
            callback: function (value) {
              if (!(value % 10)) {
                return value;
              }
            },
          },
        },
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function (context) {
              var label = context.dataset.label || "";
              var yLabel = context.parsed.y;
              var content = "";
              if (context.chart.data.datasets.length > 1) {
                content += label;
              }
              content += yLabel;
              return content;
            },
          },
        },
      },
    },
    data: {
      labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [
        {
          label: "Sales",
          data: [25, 20, 30, 22, 17, 29],
          backgroundColor: colors.theme.warning,
          borderRadius: 6,
          maxBarThickness: 10,
        },
      ],
    },
  };
  
  module.exports = {
    chartOptions, // used inside src/views/Index.js
    parseOptions, // used inside src/views/Index.js
    chartExample1, // used inside src/views/Index.js
    chartExample2, // used inside src/views/Index.js
  };