---
import { getMessages } from '../../i18n/messages.ts';

interface Props {
  locale: string;
  /** Unique per diagram on the page; prefixes ids inside the SVG. */
  uid: string;
}

const { locale, uid } = Astro.props;
const t = getMessages(locale);
const arrow = `${uid}-taa-arrow`;
// Long labels do not fit their free space on one line: split them in two at a word boundary.
// A one-word label stays on one line.
function twoLines(label: string): [string, string] {
  const words = label.split(' ');
  const split = Math.ceil(words.length / 2);
  return [words.slice(0, split).join(' '), words.slice(split).join(' ')];
}
const ascendingLines = twoLines(t['diagram.label.ascending-aorta']);
const descendingLines = twoLines(t['diagram.label.descending-aorta']);
const aneurysmLines = twoLines(t['diagram.label.aneurysm']);
// The thoracic aorta as in the coarctation diagram: it leaves the left ventricle (the root),
// runs up (the ascending aorta), turns in the arch with its three branches and runs down (the
// descending thoracic aorta). Vessels are wide strokes: the wall, then the lumen on top of it.
const arch = 'L170,120 Q170,70 220,70 L300,70 Q350,70 350,120 L350,355';
// The wall starts at the top of the ventricle; the lumen reaches into its cavity.
const aortaWall = `M170,250 ${arch}`;
const aortaLumen = `M170,266 ${arch}`;
const branches = [230, 262, 294];
// Aneurysm: the tubular ascending aorta above the root widens all round; the root (below y=212)
// and the rest of the aorta keep their normal width. Outer edge of the wall, then the lumen 4
// units inside it.
const sacWall =
  'M153,212 C153,194 141,186 141,168 C141,150 153,142 153,124 L187,124 C187,142 199,150 199,168 C199,186 187,194 187,212 Z';
const sacLumen =
  'M157,212 C157,195 145,186 145,168 C145,150 157,141 157,124 L183,124 C183,141 195,150 195,168 C195,186 183,195 183,212 Z';
// Blood flows the same way in both states: the aneurysm widens the vessel, it does not block it.
const flow = {
  main: 'M170,240 L170,120 Q170,70 220,70 L300,70 Q350,70 350,120 L350,322',
  branch: (x: number) => `M${x},58 L${x},16`,
};
---

<svg
  viewBox="0 0 490 365"
  role="img"
  aria-label={t['diagram.thoracic-aortic-aneurysm.title']}
  lang={locale}
>
  <defs>
    <marker
      id={arrow}
      viewBox="0 0 10 10"
      refX="8"
      refY="5"
      markerWidth="4"
      markerHeight="4"
      orient="auto-start-reverse"
    >
      <path d="M0,0 L10,5 L0,10 z" fill="var(--diagram-arterial)"></path>
    </marker>
  </defs>

  <!-- Left ventricle -->
  <path
    d="M115,250 L225,250 L225,292 Q225,345 170,352 Q115,345 115,292 Z"
    fill="var(--diagram-muscle)"
  ></path>

  <!-- Vessel walls: the branches of the arch and the aorta, drawn as wide strokes -->
  <g fill="none" stroke="var(--diagram-arterial)">
    {branches.map((x) => (
      <path d={`M${x},62 L${x},4`} stroke-width="16" />
    ))}
    <path d={aortaWall} stroke-width="34"></path>
  </g>
  <path class="disease-only" d={sacWall} fill="var(--diagram-arterial)"></path>

  <path
    d="M130,262 L210,262 L210,292 Q210,330 170,336 Q130,330 130,292 Z"
    fill="var(--diagram-arterial-fill)"
    stroke="var(--diagram-arterial)"
    stroke-width="2"
  ></path>

  <!-- Vessel lumens on top of the walls, opening into each other and into the ventricle -->
  <g fill="none" stroke="var(--diagram-arterial-fill)">
    {branches.map((x) => (
      <path d={`M${x},72 L${x},4`} stroke-width="10" />
    ))}
    <path d={aortaLumen} stroke-width="26"></path>
  </g>
  <path class="disease-only" d={sacLumen} fill="var(--diagram-arterial-fill)"></path>

  <!-- Flow arrows, visible with and without motion -->
  <g fill="none" stroke="var(--diagram-arterial)" stroke-linecap="round">
    {branches.map((x) => (
      <path d={flow.branch(x)} stroke-width="3" marker-end={`url(#${arrow})`} />
    ))}
    <path d={flow.main} stroke-width="4" marker-end={`url(#${arrow})`}></path>
  </g>

  <!-- Moving blood: dashes running along the arrows -->
  <g class="flow" stroke="var(--color-bg)">
    {branches.map((x) => (
      <path class="dash-flow" d={flow.branch(x)} stroke-width="1.5" />
    ))}
    <path class="dash-flow" d={flow.main} stroke-width="2"></path>
  </g>

  <!-- Labels: the segments of the thoracic aorta, the same in both states -->
  <text x="170" y="306" text-anchor="middle">
    {t['diagram.label.lv']}
  </text>
  <text class="diagram-small" x="146" y="236" text-anchor="end">
    {t['diagram.label.aortic-root']}
  </text>
  <text class="diagram-small" x="134" y="162" text-anchor="end">
    <tspan x="134">{ascendingLines[0]}</tspan>
    {ascendingLines[1] && (
      <tspan x="134" dy="15">
        {ascendingLines[1]}
      </tspan>
    )}
  </text>
  <text class="diagram-small" x="262" y="112" text-anchor="middle">
    {t['diagram.label.aortic-arch']}
  </text>
  <text class="diagram-small" x="376" y="230">
    <tspan x="376">{descendingLines[0]}</tspan>
    {descendingLines[1] && (
      <tspan x="376" dy="15">
        {descendingLines[1]}
      </tspan>
    )}
  </text>

  <!-- Aneurysm of the ascending aorta -->
  <g class="disease-only">
    <line x1="197" y1="160" x2="210" y2="160" stroke="var(--color-text)" stroke-width="1.5"></line>
    <circle cx="197" cy="160" r="2.5" fill="var(--color-text)"></circle>
    <text x="214" y="166">
      <tspan x="214">{aneurysmLines[0]}</tspan>
      {aneurysmLines[1] && (
        <tspan x="214" dy="18">
          {aneurysmLines[1]}
        </tspan>
      )}
    </text>
  </g>
</svg>