// Generated, do not edit. sha256:ea89ed2f3c7667a985d117ad93531e86e7422f6ef0152c179e997cfe96d6abd0
import { t } from '../i18n/index.js';
import { esc } from './escape.js';

const TEXT = 'fill:var(--text-primary);font-size:13px';
const SOFT = 'fill:var(--text-sec);font-size:12px';

const label = (x, y, text, style = TEXT, anchor = 'start') =>
  `<text x="${x}" y="${y}" text-anchor="${anchor}" style="${style}">${esc(text)}</text>`;

const svg = (w, h, caption, body) =>
  `<svg viewBox="0 0 ${w} ${h}" role="img" aria-label="${esc(caption)}" `
  + 'style="display:block;width:100%;min-width:30rem;height:auto;font-family:inherit">'
  + `${body}</svg>`;

function standPeriod(caption) {
  return svg(640, 184, caption, [
    `<rect x="330" y="20" width="270" height="122" rx="6" style="fill:var(--accent-soft)"/>`,
    label(465, 38, t('guide.figures.period'), 'fill:var(--accent-text);font-size:12px', 'middle'),
    `<rect x="90" y="52" width="510" height="28" rx="4" style="fill:var(--text-sec);fill-opacity:0.18;stroke:var(--text-sec)"/>`,
    label(102, 71, t('guide.figures.sinceBuy')),
    `<rect x="330" y="94" width="270" height="28" rx="4" style="fill:var(--accent);fill-opacity:0.28;stroke:var(--accent)"/>`,
    label(342, 113, t('guide.figures.inPeriod')),
    `<line x1="40" y1="152" x2="600" y2="152" style="stroke:var(--text-sec)"/>`,
    ...[90, 330, 600].map(x => `<line x1="${x}" y1="146" x2="${x}" y2="158" style="stroke:var(--text-sec)"/>`),
    label(90, 176, t('guide.figures.purchase'), SOFT, 'middle'),
    label(330, 176, t('guide.figures.yearStart'), SOFT, 'middle'),
    label(600, 176, t('guide.figures.now'), SOFT, 'end'),
  ].join(''));
}

function accountExample(caption) {
  const y = v => (230 - ((v - 140) / 60) * 200).toFixed(1);
  const cost = y(191.2), inn = y(154.92), now = y(186.43);
  const waarde = [[260, inn], [300, 168], [340, 173], [380, 145], [420, 124], [460, 132], [495, 96], [520, now]];
  const lijn = waarde.map(([x, v]) => `${x},${v}`).join(' ');
  return svg(680, 290, caption, [
    `<polygon points="${lijn} 520,${inn} 260,${inn}" style="fill:var(--pos-bg)"/>`,
    `<line x1="60" y1="${cost}" x2="520" y2="${cost}" style="stroke:var(--text-sec);stroke-dasharray:5 4"/>`,
    `<circle cx="80" cy="${cost}" r="4" style="fill:var(--text-sec)"/>`,
    label(94, Number(cost) - 8, t('guide.figures.cost'), SOFT),
    `<line x1="260" y1="${inn}" x2="520" y2="${inn}" style="stroke:var(--accent);stroke-width:2"/>`,
    label(268, Number(inn) + 20, t('guide.figures.broughtIn'), 'fill:var(--accent-text);font-size:12px'),
    `<polyline points="${lijn}" style="fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linejoin:round"/>`,
    `<circle cx="520" cy="${now}" r="4" style="fill:var(--text-primary)"/>`,
    `<line x1="534" y1="${cost}" x2="534" y2="${now}" style="stroke:var(--neg);stroke-width:3"/>`,
    label(544, Number(now) - 3, t('guide.figures.unrealized'), 'fill:var(--neg);font-size:12px'),
    `<line x1="534" y1="${Number(now) + 3}" x2="534" y2="${inn}" style="stroke:var(--pos);stroke-width:3"/>`,
    label(544, 128, t('guide.figures.result'), 'fill:var(--pos);font-size:12px'),
    label(544, 144, t('guide.figures.resultAmount'), 'fill:var(--pos);font-size:12px'),
    `<line x1="60" y1="232" x2="520" y2="232" style="stroke:var(--text-sec)"/>`,
    ...[80, 260, 520].map(x => `<line x1="${x}" y1="226" x2="${x}" y2="238" style="stroke:var(--text-sec)"/>`),
    label(80, 254, t('guide.figures.purchaseExchange'), SOFT, 'middle'),
    label(260, 254, t('guide.figures.transfer'), SOFT, 'middle'),
    label(520, 254, t('guide.figures.value'), SOFT, 'middle'),
    `<line x1="60" y1="278" x2="84" y2="278" style="stroke:var(--text-primary);stroke-width:2"/>`,
    label(90, 282, t('guide.figures.legendValue'), SOFT),
    `<line x1="160" y1="278" x2="184" y2="278" style="stroke:var(--accent);stroke-width:2"/>`,
    label(190, 282, t('guide.figures.legendBroughtIn'), SOFT),
    `<line x1="320" y1="278" x2="344" y2="278" style="stroke:var(--text-sec);stroke-dasharray:5 4"/>`,
    label(350, 282, t('guide.figures.legendCost'), SOFT),
  ].join(''));
}

function resultSum(caption) {
  const deel = (x, w, opacity, text) =>
    `<rect x="${x}" y="62" width="${w}" height="30" rx="4" style="fill:var(--accent);fill-opacity:${opacity};stroke:var(--accent)"/>`
    + label(x + 10, 82, text);
  return svg(640, 104, caption, [
    label(180, 32, t('guide.figures.result'), TEXT, 'end'),
    `<rect x="196" y="12" width="404" height="30" rx="4" style="fill:var(--accent);fill-opacity:0.35;stroke:var(--accent)"/>`,
    label(180, 82, t('guide.figures.roughly'), SOFT, 'end'),
    deel(196, 220, 0.25, t('guide.figures.unrealizedPart')),
    deel(420, 120, 0.15, t('guide.figures.realized')),
    deel(544, 56, 0.06, t('guide.figures.interest')),
  ].join(''));
}

export const GUIDE_FIGURE_DRAWINGS = Object.freeze({
  'stand-period': standPeriod,
  'account-example': accountExample,
  'result-sum': resultSum,
});