---
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}-tof-arrow-v`;
const arrowA = `${uid}-tof-arrow-a`;
// Labels too long for one line in the label column 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 outflowLines = twoLines(t['diagram.label.rv-outflow-narrowing']);
const widenedLines = twoLines(t['diagram.label.rv-outflow-widened']);
const backflowLines = twoLines(t['diagram.label.pulmonary-backflow']);
// Paths of the blood, shared by the arrows and the moving dashes on top of them. The heart is
// drawn in its own coordinates and shifted right by 160; labels sit in the free column on the left.
const flow = {
  // Normal: the right ventricle empties into a wide pulmonary artery, the left into the aorta.
  toPulmonary: 'M100,282 L100,46',
  toAorta: 'M225,282 L225,44',
  // Tetralogy: a thin stream through the narrowed outflow, and venous blood crossing the defect
  // into the aorta, which sits over the septum, next to the blood from the left ventricle.
  toPulmonaryNarrow: 'M105,262 L105,46',
  shunt: 'M130,262 Q150,215 158,170 L158,44',
  toOverridingAorta: 'M235,270 Q185,230 180,170 L180,44',
  // After repair: the patch over the defect leads the left ventricle into the aorta, and the
  // widened outflow lets the right ventricle empty into the pulmonary artery. Blood may leak back
  // from the pulmonary artery into the right ventricle (pulmonary regurgitation).
  toPulmonaryRepaired: 'M100,262 L100,46',
  toAortaRepaired: 'M232,270 Q184,236 172,190 L170,44',
  backflow: 'M116,60 L116,206',
};
---

<svg
  viewBox="0 0 470 345"
  role="img"
  aria-label={t['diagram.tetralogy-of-fallot.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>
  </defs>

  <g transform="translate(160 0)">
    <!-- Ventricles with the septum between them; the outer wall is the same in both states -->
    <path
      d="M30,150 L300,150 C312,220 266,302 165,324 C64,302 18,220 30,150 Z"
      fill="var(--diagram-muscle)"
    ></path>

    <!-- Pulmonary artery from the right ventricle: wide in the normal heart, with a narrowed
         outflow and a narrower trunk in tetralogy -->
    <path
      class="normal-only"
      d="M75,172 L75,30 L125,30 L125,172 Z"
      fill="var(--diagram-venous-fill)"
    ></path>
    <path
      class="normal-only"
      d="M75,150 L75,30 M125,30 L125,150"
      fill="none"
      stroke="var(--diagram-venous)"
      stroke-width="2"
    ></path>
    <path
      class="disease-only"
      d="M98,178 L98,140 C98,128 86,124 86,112 L86,30 L124,30 L124,112 C124,124 112,128 112,140 L112,178 Z"
      fill="var(--diagram-venous-fill)"
    ></path>
    <path
      class="disease-only"
      d="M98,150 L98,140 C98,128 86,124 86,112 L86,30 M124,30 L124,112 C124,124 112,128 112,140 L112,150"
      fill="none"
      stroke="var(--diagram-venous)"
      stroke-width="2"
    ></path>

    <!-- After repair: the outflow from the right ventricle is widened with a patch; the trunk
         itself stays as it was -->
    <g data-only="treated">
      <path
        d="M86,172 C76,156 76,128 86,112 L86,30 L124,30 L124,172 Z"
        fill="var(--diagram-venous-fill)"
      ></path>
      <path
        d="M86,112 L86,30 M124,30 L124,150"
        fill="none"
        stroke="var(--diagram-venous)"
        stroke-width="2"
      ></path>
      <path
        d="M86,112 C76,128 76,156 84,172"
        fill="none"
        stroke="var(--color-muted)"
        stroke-width="5"
        stroke-linecap="round"
      ></path>
    </g>

    <!-- Aorta: from the left ventricle in the normal heart; in tetralogy shifted towards the right
         ventricle, over the septum, with less than half of it over the right ventricle -->
    <path
      class="normal-only"
      d="M200,172 L200,26 L250,26 L250,172 Z"
      fill="var(--diagram-arterial-fill)"
    ></path>
    <path
      class="normal-only"
      d="M200,150 L200,26 M250,26 L250,150"
      fill="none"
      stroke="var(--diagram-arterial)"
      stroke-width="2"
    ></path>
    <path
      class="disease-only"
      d="M143,172 L143,26 L193,26 L193,172 Z"
      fill="var(--diagram-arterial-fill)"
    ></path>
    <path
      class="disease-only"
      d="M143,150 L143,26 M193,26 L193,150"
      fill="none"
      stroke="var(--diagram-arterial)"
      stroke-width="2"
    ></path>

    <!-- After repair the aorta stays where it was -->
    <g data-only="treated">
      <path d="M143,172 L143,26 L193,26 L193,172 Z" fill="var(--diagram-arterial-fill)"></path>
      <path
        d="M143,150 L143,26 M193,26 L193,150"
        fill="none"
        stroke="var(--diagram-arterial)"
        stroke-width="2"
      ></path>
    </g>

    <!-- Right ventricle cavity: the wall is thicker in tetralogy, so the cavity is smaller -->
    <path
      class="normal-only"
      d="M48,165 L155,165 L155,292 C100,284 52,242 48,165 Z"
      fill="var(--diagram-venous-fill)"
      stroke="var(--diagram-venous)"
      stroke-width="2"
    ></path>
    <path
      class="disease-only"
      d="M78,172 L155,172 L155,276 C118,270 82,236 78,172 Z"
      fill="var(--diagram-venous-fill)"
      stroke="var(--diagram-venous)"
      stroke-width="2"
    ></path>
    <path
      data-only="treated"
      d="M78,172 L141,172 L157,214 L157,276 C118,270 82,236 78,172 Z"
      fill="var(--diagram-venous-fill)"
      stroke="var(--diagram-venous)"
      stroke-width="2"
    ></path>
    <!-- Openings from the cavities into the vessels -->
    <rect
      class="normal-only"
      x="77"
      y="163"
      width="46"
      height="4"
      fill="var(--diagram-venous-fill)"
    ></rect>
    <rect
      class="disease-only"
      x="100"
      y="170"
      width="10"
      height="4"
      fill="var(--diagram-venous-fill)"
    ></rect>

    <!-- Left ventricle cavity: the same in both states -->
    <path
      d="M175,165 L284,165 C280,242 228,284 175,292 Z"
      fill="var(--diagram-arterial-fill)"
      stroke="var(--diagram-arterial)"
      stroke-width="2"
    ></path>
    <rect
      class="normal-only"
      x="202"
      y="163"
      width="46"
      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="145" y="168" width="12" height="8" fill="var(--diagram-venous-fill)"></rect>
      <rect x="175" y="162" width="16" height="6" fill="var(--diagram-arterial-fill)"></rect>
      <rect x="155" y="160" width="20" height="58" fill="var(--diagram-venous-fill)"></rect>
      <path
        d="M155,162 L155,218 L175,218 L175,162"
        fill="none"
        stroke="var(--color-text)"
        stroke-width="1.5"
        stroke-dasharray="3 2"
      ></path>
    </g>

    <!-- After repair: a patch closes the defect so that the aorta opens only into the left
         ventricle; the wide opening into the pulmonary artery -->
    <g data-only="treated">
      <rect x="175" y="162" width="18" height="6" fill="var(--diagram-arterial-fill)"></rect>
      <rect x="82" y="170" width="40" height="4" fill="var(--diagram-venous-fill)"></rect>
      <path
        d="M146,168 L192,168 L176,180 L176,224 L166,224 L158,214 Z"
        fill="var(--diagram-arterial-fill)"
      ></path>
      <path
        d="M143,170 L158,214 L165,222"
        fill="none"
        stroke="var(--color-muted)"
        stroke-width="5"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </g>

    <!-- Flow arrows, visible with and without motion -->
    <g fill="none" stroke-linecap="round">
      <path
        class="normal-only"
        d={flow.toPulmonary}
        stroke="var(--diagram-venous)"
        stroke-width="4"
        marker-end={`url(#${arrowV})`}
      ></path>
      <path
        class="normal-only"
        d={flow.toAorta}
        stroke="var(--diagram-arterial)"
        stroke-width="4"
        marker-end={`url(#${arrowA})`}
      ></path>
      <path
        class="disease-only"
        d={flow.toPulmonaryNarrow}
        stroke="var(--diagram-venous)"
        stroke-width="2"
        marker-end={`url(#${arrowV})`}
      ></path>
      <path
        class="disease-only"
        d={flow.shunt}
        stroke="var(--diagram-venous)"
        stroke-width="4"
        marker-end={`url(#${arrowV})`}
      ></path>
      <path
        class="disease-only"
        d={flow.toOverridingAorta}
        stroke="var(--diagram-arterial)"
        stroke-width="4"
        marker-end={`url(#${arrowA})`}
      ></path>
      <path
        data-only="treated"
        d={flow.toPulmonaryRepaired}
        stroke="var(--diagram-venous)"
        stroke-width="4"
        marker-end={`url(#${arrowV})`}
      ></path>
      <path
        data-only="treated"
        d={flow.toAortaRepaired}
        stroke="var(--diagram-arterial)"
        stroke-width="4"
        marker-end={`url(#${arrowA})`}
      ></path>
      <!-- Backflow is dashed and does not move: it is possible, not always present -->
      <path
        data-only="treated"
        d={flow.backflow}
        stroke="var(--diagram-venous)"
        stroke-width="2"
        stroke-dasharray="4 3"
        marker-end={`url(#${arrowV})`}
      ></path>
    </g>

    <!-- Moving blood: dashes running along the arrows -->
    <g class="flow" stroke="var(--color-bg)">
      <path class="dash-flow normal-only" d={flow.toPulmonary} stroke-width="2"></path>
      <path class="dash-flow normal-only" d={flow.toAorta} stroke-width="2"></path>
      <path class="dash-flow disease-only" d={flow.toPulmonaryNarrow} stroke-width="1"></path>
      <path class="dash-flow disease-only" d={flow.shunt} stroke-width="2"></path>
      <path class="dash-flow disease-only" d={flow.toOverridingAorta} stroke-width="2"></path>
      <path
        class="dash-flow"
        data-only="treated"
        d={flow.toPulmonaryRepaired}
        stroke-width="2"
      ></path>
      <path class="dash-flow" data-only="treated" d={flow.toAortaRepaired} stroke-width="2"></path>
    </g>

    <!-- Chamber and vessel labels inside the drawing -->
    <text class="normal-only" x="68" y="240" text-anchor="middle">
      {t['diagram.label.rv']}
    </text>
    <text class="disease-only" x="127" y="214" text-anchor="middle">
      {t['diagram.label.rv']}
    </text>
    <text data-only="treated" x="127" y="246" text-anchor="middle">
      {t['diagram.label.rv']}
    </text>
    <text x="248" y="236" text-anchor="middle">
      {t['diagram.label.lv']}
    </text>
    <text class="normal-only" x="225" y="19" text-anchor="middle">
      {t['diagram.label.aorta']}
    </text>
    <text class="diagram-small disease-only" x="168" y="19" text-anchor="middle">
      {t['diagram.label.overriding-aorta']}
    </text>
    <text data-only="treated" x="168" y="19" text-anchor="middle">
      {t['diagram.label.aorta']}
    </text>

    <!-- Septum (normal) or defect (tetralogy), labelled below the heart -->
    <g stroke="var(--color-text)" stroke-width="1.5">
      <line class="normal-only" x1="165" y1="230" x2="165" y2="322"></line>
      <line class="disease-only" x1="165" y1="220" x2="165" y2="322"></line>
      <line data-only="treated" x1="165" y1="222" x2="165" y2="322"></line>
    </g>
  </g>

  <text class="normal-only" x="325" y="341" text-anchor="middle">
    {t['diagram.label.septum']}
  </text>
  <text class="disease-only" x="325" y="341" text-anchor="middle">
    {t['diagram.label.defect']}
  </text>
  <text data-only="treated" x="325" y="341" text-anchor="middle">
    {t['diagram.label.vsd-patch']}
  </text>

  <!-- Labels in the left column with leader lines into the drawing -->
  <g stroke="var(--color-muted)" stroke-width="1.5">
    <line class="normal-only" x1="150" y1="70" x2="233" y2="70"></line>
    <line class="disease-only" x1="150" y1="70" x2="244" y2="70"></line>
    <line class="disease-only" x1="150" y1="148" x2="256" y2="148"></line>
    <line class="disease-only" x1="150" y1="226" x2="222" y2="226"></line>
    <line data-only="treated" x1="150" y1="70" x2="244" y2="70"></line>
    <line data-only="treated" x1="150" y1="148" x2="236" y2="148"></line>
    <line data-only="treated" x1="178" y1="208" x2="274" y2="208"></line>
  </g>
  <text class="diagram-small" x="8" y="74">
    {t['diagram.label.pulmonaryArtery']}
  </text>
  <text class="diagram-small disease-only" x="8" y="145">
    <tspan x="8">{outflowLines[0]}</tspan>
    <tspan x="8" dy="15">
      {outflowLines[1]}
    </tspan>
  </text>
  <text class="diagram-small disease-only" x="8" y="230">
    {t['diagram.label.rv-hypertrophy']}
  </text>
  <text class="diagram-small" data-only="treated" x="8" y="145">
    <tspan x="8">{widenedLines[0]}</tspan>
    <tspan x="8" dy="15">
      {widenedLines[1]}
    </tspan>
  </text>
  <text class="diagram-small" data-only="treated" x="8" y="205">
    <tspan x="8">{backflowLines[0]}</tspan>
    <tspan x="8" dy="15">
      {backflowLines[1]}
    </tspan>
  </text>
</svg>