// Generated, do not edit. sha256:2b462247335f4413d5ae4038e57da8d4d3e70b4fb676fc84dcbba876e90e1c18
import { loadCharting, readPalette } from '../ui/chart-setup.js';
import { t } from '../i18n/index.js';
import { fmtBase } from '../ui/format.js';

let tipEl = null;
const verberg = () => tipEl?.classList.remove('is-visible');

function tip({ chart, tooltip }, rijen) {
  if (!tipEl) {
    tipEl = document.createElement('div');
    tipEl.className = 'ring-tip';
    document.body.appendChild(tipEl);
    window.addEventListener('scroll', verberg, { capture: true, passive: true });
  }
  if (!tooltip.opacity || !tooltip.dataPoints?.length) { verberg(); return; }
  const r = rijen[tooltip.dataPoints[0].dataIndex];
  const regel = (label, bedrag) => {
    const rij = document.createElement('span');
    rij.className = 'ring-tip-row';
    const naam = document.createElement('span');
    naam.className = 'ring-tip-pct';
    naam.textContent = label;
    const val = document.createElement('span');
    val.className = 'val';
    val.textContent = fmtBase(bedrag || 0);
    rij.append(naam, val);
    return rij;
  };
  const kop = document.createElement('span');
  kop.className = 'ring-tip-label';
  kop.textContent = r.label;
  tipEl.replaceChildren(kop,
    regel(t('wealth.valueEnd'), r.waarde),
    regel(t('wealth.investedNet'), r.inleg),
    regel(t('wealth.result'), r.resultaat));
  const box = chart.canvas.getBoundingClientRect();
  tipEl.style.left = `${Math.round(box.left + tooltip.caretX)}px`;
  tipEl.style.top = `${Math.round(box.top + tooltip.caretY)}px`;
  tipEl.classList.add('is-visible');
}

export async function tekenJaarGrafiek(canvas, rijen) {
  const Chart = await loadCharting();
  const pal = readPalette();
  const resultaat = rijen.map(r => r.resultaat || 0);
  const grafiek = new Chart(canvas, {
    data: {
      labels: rijen.map(r => r.label),
      datasets: [
        { type: 'bar', label: t('wealth.investedNet'), data: rijen.map(r => r.inleg || 0),
          backgroundColor: pal.accentFaint, order: 2, yAxisID: 'y' },
        { type: 'bar', label: t('wealth.result'), data: resultaat,
          backgroundColor: resultaat.map(v => (v >= 0 ? pal.sigGreen : pal.sigRed)), order: 2, yAxisID: 'y' },
        { type: 'line', label: t('wealth.valueEnd'), data: rijen.map(r => r.waarde || 0),
          borderColor: pal.accent, backgroundColor: pal.accent, borderWidth: 2, pointRadius: 3,
          cubicInterpolationMode: 'monotone', order: 1, yAxisID: 'waarde' },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
      interaction: { mode: 'index', intersect: false },
      scales: {
        x: { grid: { display: false }, ticks: { color: pal.textSec } },
        y: { ticks: { display: false }, grid: { color: pal.grid }, border: { display: false } },
        waarde: { position: 'right', display: false, beginAtZero: true },
      },
      plugins: {
        legend: { display: true, position: 'bottom', labels: { color: pal.textSec, boxWidth: 10, boxHeight: 10 } },
        tooltip: { enabled: false, external: ctx => tip(ctx, rijen) },
      },
    },
  });
  canvas.addEventListener('mouseleave', verberg);
  const destroy = grafiek.destroy.bind(grafiek);
  grafiek.destroy = () => { verberg(); destroy(); };
  return grafiek;
}