{% load i18n %}
{% if currency_data.labels %}
  <div class="chart-container relative h-[400px] w-full"
       _="init call setupCurrencyChart() end">
    <canvas id="currencyChart"></canvas>
  </div>

  <script>
      // Get the data from your Django view (passed as JSON)
      var currencyData = {{ currency_data|safe }};

      function setupCurrencyChart() {
          var chartOptions = {
              indexAxis: 'y',
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  x: {
                      stacked: true,
                      title: {
                          display: false,
                      },
                  },
                  y: {
                      stacked: true,
                      title: {
                          display: false,
                      },
                  }
              },
              plugins: {
                  legend: {
                      display: false,
                  },
                  tooltip: {
                      callbacks: {
                          label: function (context) {
                              if (context.parsed.x !== null) {
                                  return `${context.dataset.label}: ${new Intl.NumberFormat(undefined, {
                                      minimumFractionDigits: 0,
                                      maximumFractionDigits: 30,
                                      roundingMode: 'trunc'
                                  }).format(Math.abs(context.parsed.x))}`;
                              }
                              return "";
                          },
                      }
                  }
              }
          };

          new Chart(
              document.getElementById('currencyChart'),
              {
                  type: 'bar',
                  data: {
                      labels: currencyData.labels,
                      datasets: [
                          {
                              label: "{% trans 'Projected Expenses' %}",
                              data: currencyData.datasets[3].data,
                              backgroundColor: '#f8717180',
                              stack: 'stack0'
                          },
                          {
                              label: "{% trans 'Current Expenses' %}",
                              data: currencyData.datasets[1].data,
                              backgroundColor: '#f87171',
                              stack: 'stack0'
                          },
                          {
                              label: "{% trans 'Current Income' %}",
                              data: currencyData.datasets[0].data,
                              backgroundColor: '#4dde80',
                              stack: 'stack0'
                          },
                          {
                              label: "{% trans 'Projected Income' %}",
                              data: currencyData.datasets[2].data,
                              backgroundColor: '#4dde8080',
                              stack: 'stack0'
                          },

                      ]
                  },
                  options: chartOptions
              }
          );
      }
  </script>
{% else %}
  <c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
{% endif %}