---
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 arrowV = `${uid}-pavsd-arrow-v`;
const arrowA = `${uid}-pavsd-arrow-a`;
const arrowMix = `${uid}-pavsd-arrow-mix`;
const mixFill = `${uid}-pavsd-mix`;
// Labels too long for one line are split in two.
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 thinPaLines = twoLines(t['diagram.label.thin-pulmonary-arteries']);
const closedLines = twoLines(t['diagram.label.rv-outflow-closed']);
const ductLines = twoLines(t['diagram.label.open-duct']);
// The ventricles sit low with the septum at x 285; the pulmonary arteries run across at y 130 and
// the aorta arches over them into the descending aorta on the right. Labels sit in the free
// column on the left. Vessels are tubes: a wide stroke in the wall colour under a narrower one in
// the blood colour, so branches join without seams.
const vessel = {
  // Normal: a wide pulmonary trunk from the right ventricle dividing into two branches, and the
  // aorta from the left ventricle.
  trunk: 'M250,246 L250,130',
  branches: 'M160,130 L462,130',
  aorta: 'M315,250 L315,90 C315,58 350,46 395,46 C450,46 490,62 490,100 L490,396',
  // Pulmonary atresia with VSD (Минздрав 47_3, 1.1, 2.4; ESC 2020 ACHD 4.11.1): one variant with
  // a thin pulmonary trunk ending blindly over the right ventricle and thin (hypoplastic) branches.
  // The aorta sits over the defect, and the lungs get blood from it through the open duct and
  // collaterals from the descending aorta.
  stub: 'M250,232 L250,130',
  aortaOverriding: 'M290,254 L290,90 C290,58 330,46 385,46 C450,46 490,62 490,100 L490,396',
  duct: 'M452,62 C452,90 447,106 446,128',
};
// Paths of the blood, shared by the arrows and the moving dashes on top of them.
const flow = {
  toTrunk: 'M250,332 L250,140',
  toRightLung: 'M250,140 C250,133 244,130 236,130 L170,130',
  toLeftLung: 'M250,140 C250,133 256,130 264,130 L450,130',
  toAorta: 'M320,336 L316,250 L315,90 C315,58 350,46 395,46 C450,46 490,62 490,100 L490,382',
  // Disease: venous blood from the right ventricle and arterial blood from the left both enter the
  // aorta over the defect; mixed blood goes on to the body and, through the duct and the
  // collaterals, into the pulmonary arteries.
  fromRv: 'M270,334 L272,300 C274,280 280,268 283,256',
  fromLv: 'M318,336 C316,300 302,272 297,256',
  mixedAorta: 'M290,240 L290,90 C290,58 330,46 385,46 C450,46 490,62 490,100 L490,382',
  throughDuct: 'M452,72 C452,92 447,106 446,122',
  collateralUpper: 'M474,174 C456,174 462,154 448,152 C434,150 440,140 433,137',
  collateralLower: 'M474,206 C450,206 456,182 436,180 C414,178 420,152 410,137',
  mixedPa: 'M440,130 L170,130',
};
---

<svg
  viewBox="0 0 520 400"
  role="img"
  aria-label={t['diagram.pulmonary-atresia-with-ventricular-septal-defect.title']}
  lang={locale}
>
  <defs>
    <marker
      id={arrowV}
      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-venous)"></path>
    </marker>
    <marker
      id={arrowA}
      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>
    <marker
      id={arrowMix}
      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(--color-text)"></path>
    </marker>
    <!-- Mixed blood inside the vessels: stripes of the venous and arterial fills -->
    <pattern
      id={mixFill}
      width="8"
      height="8"
      patternUnits="userSpaceOnUse"
      patternTransform="rotate(45)"
    >
      <rect width="8" height="8" fill="var(--diagram-venous-fill)"></rect>
      <rect width="4" height="8" fill="var(--diagram-arterial-fill)"></rect>
    </pattern>
  </defs>

  <!-- Ventricles with the septum between them; the outer wall is the same in both states -->
  <path
    d="M175,230 L395,230 C405,288 369,354 285,374 C201,354 165,288 175,230 Z"
    fill="var(--diagram-muscle)"
  ></path>

  <!-- Normal: a wide pulmonary trunk and two branches with venous blood. The branch to the left
       lung passes behind the aorta, so the pulmonary arteries and their blood come first. -->
  <g class="normal-only" fill="none">
    <path d={vessel.branches} stroke="var(--diagram-venous)" stroke-width="20"></path>
    <path d={vessel.trunk} stroke="var(--diagram-venous)" stroke-width="40"></path>
    <path d={vessel.branches} stroke="var(--diagram-venous-fill)" stroke-width="16"></path>
    <path d={vessel.trunk} stroke="var(--diagram-venous-fill)" stroke-width="36"></path>
    <g stroke="var(--diagram-venous)" stroke-width="3" stroke-linecap="round">
      <path d={flow.toRightLung} marker-end={`url(#${arrowV})`}></path>
      <path d={flow.toLeftLung} marker-end={`url(#${arrowV})`}></path>
    </g>
    <g class="flow" stroke="var(--color-bg)" stroke-width="1.5">
      <path class="dash-flow" d={flow.toRightLung}></path>
      <path class="dash-flow" d={flow.toLeftLung}></path>
    </g>
  </g>

  <!-- Disease: a thin trunk and thin branches holding mixed blood that came from the aorta; the
       trunk ends blindly over the right ventricle -->
  <g class="disease-only" fill="none">
    <path d={vessel.branches} stroke="var(--diagram-venous)" stroke-width="12"></path>
    <path d={vessel.stub} stroke="var(--diagram-venous)" stroke-width="16"></path>
    <path d={vessel.branches} stroke={`url(#${mixFill})`} stroke-width="8"></path>
    <path d={vessel.stub} stroke={`url(#${mixFill})`} stroke-width="12"></path>
    <g stroke-width="2.5" stroke-linecap="round">
      <path d={flow.mixedPa} stroke="var(--diagram-venous)" marker-end={`url(#${arrowMix})`}></path>
      <path d={flow.mixedPa} stroke="var(--diagram-arterial)" stroke-dasharray="6 6"></path>
    </g>
    <g class="flow" stroke="var(--color-bg)" stroke-width="1">
      <path class="dash-flow" d={flow.mixedPa}></path>
    </g>
  </g>

  <!-- Aorta: from the left ventricle normally; over the defect, with mixed blood, in the disease -->
  <g class="normal-only" fill="none">
    <path d={vessel.aorta} stroke="var(--diagram-arterial)" stroke-width="34"></path>
    <path d={vessel.aorta} stroke="var(--diagram-arterial-fill)" stroke-width="30"></path>
  </g>
  <g class="disease-only" fill="none">
    <path d={vessel.aortaOverriding} stroke="var(--diagram-arterial)" stroke-width="34"></path>
    <path d={vessel.aortaOverriding} stroke={`url(#${mixFill})`} stroke-width="30"></path>
  </g>

  <!-- Right ventricle cavity: the wall is thicker in the disease, and its outflow narrows into a
       funnel that ends blindly at a solid plate where the pulmonary valve should open -->
  <path
    class="normal-only"
    d="M190,242 L277,242 L277,356 C231,348 193,312 190,242 Z"
    fill="var(--diagram-venous-fill)"
    stroke="var(--diagram-venous)"
    stroke-width="2"
  ></path>
  <rect
    class="normal-only"
    x="232"
    y="240"
    width="36"
    height="4"
    fill="var(--diagram-venous-fill)"
  ></rect>
  <path
    class="disease-only"
    d="M212,250 L238,250 L244,240 L256,240 L262,250 L277,250 L277,340 C247,334 216,306 212,250 Z"
    fill="var(--diagram-venous-fill)"
    stroke="var(--diagram-venous)"
    stroke-width="2"
  ></path>
  <rect class="disease-only" x="240" y="230" width="20" height="8" fill="var(--color-text)"></rect>

  <!-- Left ventricle cavity: the same in both states -->
  <path
    d="M293,242 L381,242 C377,304 337,346 293,356 Z"
    fill="var(--diagram-arterial-fill)"
    stroke="var(--diagram-arterial)"
    stroke-width="2"
  ></path>
  <rect
    class="normal-only"
    x="300"
    y="240"
    width="30"
    height="4"
    fill="var(--diagram-arterial-fill)"
  ></rect>

  <!-- Large defect at the top of the septum, under the aorta: the aorta opens into both
       ventricles and the defect joins them -->
  <g class="disease-only">
    <rect x="275" y="248" width="18" height="44" fill="var(--diagram-venous-fill)"></rect>
    <rect x="293" y="240" width="12" height="8" fill="var(--diagram-arterial-fill)"></rect>
    <path
      d="M277,252 L277,292 L293,292 L293,246"
      fill="none"
      stroke="var(--color-text)"
      stroke-width="1.5"
      stroke-dasharray="3 2"
    ></path>
  </g>

  <!-- Normal: venous blood to the lungs, arterial blood to the body -->
  <g class="normal-only" fill="none" stroke-linecap="round">
    <path d={flow.toTrunk} stroke="var(--diagram-venous)" stroke-width="3"></path>
    <path
      d={flow.toAorta}
      stroke="var(--diagram-arterial)"
      stroke-width="3"
      marker-end={`url(#${arrowA})`}
    ></path>
    <g class="flow" stroke="var(--color-bg)" stroke-width="1.5">
      <path class="dash-flow" d={flow.toTrunk}></path>
      <path class="dash-flow" d={flow.toAorta}></path>
    </g>
  </g>

  <!-- Disease: both ventricles empty into the aorta; mixed blood (a venous line with arterial
       dashes) goes to the body and, through the duct and the collaterals, to the lungs -->
  <g class="disease-only" fill="none" stroke-linecap="round">
    <!-- Open duct between the underside of the arch and the pulmonary artery -->
    <path d={vessel.duct} stroke="var(--diagram-arterial)" stroke-width="12"></path>
    <path d="M452,56 C452,90 447,106 446,132" stroke={`url(#${mixFill})`} stroke-width="8"></path>
    <path
      d={flow.fromRv}
      stroke="var(--diagram-venous)"
      stroke-width="3"
      marker-end={`url(#${arrowV})`}
    ></path>
    <path
      d={flow.fromLv}
      stroke="var(--diagram-arterial)"
      stroke-width="3"
      marker-end={`url(#${arrowA})`}
    ></path>
    <g stroke-width="3">
      <path
        d={flow.mixedAorta}
        stroke="var(--diagram-venous)"
        marker-end={`url(#${arrowMix})`}
      ></path>
      <path d={flow.mixedAorta} stroke="var(--diagram-arterial)" stroke-dasharray="6 6"></path>
      <path
        d={flow.throughDuct}
        stroke="var(--diagram-venous)"
        marker-end={`url(#${arrowMix})`}
      ></path>
      <path d={flow.throughDuct} stroke="var(--diagram-arterial)" stroke-dasharray="6 6"></path>
    </g>
    <!-- Collaterals from the descending aorta to the pulmonary arteries: tortuous vessels drawn
         as their own mixed stream -->
    <g stroke-width="4">
      <path
        d={flow.collateralUpper}
        stroke="var(--diagram-venous)"
        marker-end={`url(#${arrowMix})`}
      ></path>
      <path d={flow.collateralUpper} stroke="var(--diagram-arterial)" stroke-dasharray="6 6"></path>
      <path
        d={flow.collateralLower}
        stroke="var(--diagram-venous)"
        marker-end={`url(#${arrowMix})`}
      ></path>
      <path d={flow.collateralLower} stroke="var(--diagram-arterial)" stroke-dasharray="6 6"></path>
    </g>
    <g class="flow" stroke="var(--color-bg)" stroke-width="1.5">
      <path class="dash-flow" d={flow.fromRv}></path>
      <path class="dash-flow" d={flow.fromLv}></path>
      <path class="dash-flow" d={flow.mixedAorta}></path>
      <path class="dash-flow" d={flow.throughDuct}></path>
      <path class="dash-flow" d={flow.collateralUpper}></path>
      <path class="dash-flow" d={flow.collateralLower}></path>
    </g>
  </g>

  <!-- Septum (normal) or defect (disease), labelled below the heart -->
  <g stroke="var(--color-text)" stroke-width="1.5">
    <line class="normal-only" x1="285" y1="250" x2="285" y2="372"></line>
    <line class="disease-only" x1="285" y1="294" x2="285" y2="372"></line>
  </g>
  <text class="normal-only" x="285" y="395" text-anchor="middle">
    {t['diagram.label.septum']}
  </text>
  <text class="disease-only" x="285" y="395" text-anchor="middle">
    {t['diagram.label.defect']}
  </text>

  <!-- Chamber and vessel labels inside the drawing -->
  <text class="normal-only" x="212" y="300" text-anchor="middle">
    {t['diagram.label.rv']}
  </text>
  <text class="disease-only" x="232" y="290" text-anchor="middle">
    {t['diagram.label.rv']}
  </text>
  <text x="358" y="292" text-anchor="middle">
    {t['diagram.label.lv']}
  </text>
  <text class="normal-only" x="395" y="22" text-anchor="middle">
    {t['diagram.label.aorta']}
  </text>
  <text class="diagram-small disease-only" x="385" y="24" text-anchor="middle">
    {t['diagram.label.overriding-aorta']}
  </text>
  <text class="diagram-small disease-only" x="438" y="84" text-anchor="end">
    <tspan x="438">{ductLines[0]}</tspan>
    <tspan x="438" dy="15">
      {ductLines[1]}
    </tspan>
  </text>
  <text class="diagram-small disease-only" x="430" y="196" text-anchor="end">
    {t['diagram.label.collaterals']}
  </text>

  <!-- Labels in the left column with leader lines into the drawing -->
  <g class="disease-only" stroke="var(--color-muted)" stroke-width="1.5">
    <line x1="150" y1="203" x2="241" y2="231"></line>
    <line x1="150" y1="290" x2="192" y2="290"></line>
  </g>
  <text class="diagram-small normal-only" x="8" y="134">
    {t['diagram.label.pulmonaryArtery']}
  </text>
  <text class="diagram-small disease-only" x="8" y="126">
    <tspan x="8">{thinPaLines[0]}</tspan>
    <tspan x="8" dy="15">
      {thinPaLines[1]}
    </tspan>
  </text>
  <text class="diagram-small disease-only" x="8" y="196">
    <tspan x="8">{closedLines[0]}</tspan>
    <tspan x="8" dy="15">
      {closedLines[1]}
    </tspan>
  </text>
  <text class="diagram-small disease-only" x="8" y="294">
    {t['diagram.label.rv-hypertrophy']}
  </text>
</svg>