// Figures for Part III: the causal reference of Chapter 7 and the image
// lattice of Chapter 8.
import type { ReactElement } from 'react'
import { Arrowheads, Figure, Label, Node, arrow } from './svg.tsx'
import { faded, ink, method } from '../plot/palette.ts'

/** A larger grid, run for fewer steps than it is wide, is exact in the region. */
export function Causality() {
  const cx = 250
  const cy = 132
  const r = 44
  const e = 96
  return (
    <Figure
      width={716}
      height={272}
      caption="The reference of Chapter 7. The region of interest (solid) sits inside a grid that is larger by M + 2 nodes on every side. In M steps, anything that starts at the outer edge can travel at most M nodes inwards (the shaded band), so it never reaches the region: inside it, the larger grid computes the scheme's free-space solution exactly, whatever happens at its own edges."
    >
      <Arrowheads id="cau" colors={[ink.muted, method.boundary]} />
      <rect x={cx - r - e} y={cy - r - e + 40} width={2 * (r + e)} height={2 * (r + e) - 80} fill="none" stroke={ink.secondary} strokeWidth={1.4} />
      <rect
        x={cx - r - e + 4}
        y={cy - r - e + 44}
        width={2 * (r + e) - 8}
        height={2 * (r + e) - 88}
        fill="none"
        stroke={faded(method.boundary, 0.55)}
        strokeWidth={30}
        opacity={0.5}
      />
      <rect x={cx - r} y={cy - r} width={2 * r} height={2 * r} fill={faded(method.fd2, 0.82)} stroke={method.fd2} strokeWidth={2} />
      <Node x={cx - 12} y={cy + 4} r={4} fill={method.waveguide} />
      <Label x={cx} y={cy - r + 14} size={11} fill={ink.primary}>
        region
      </Label>
      <line x1={cx + r + 2} y1={cy + 24} x2={cx + r + e - 2} y2={cy + 24} stroke={ink.muted} strokeWidth={1.2} markerStart={arrow('cau', 0)} markerEnd={arrow('cau', 0)} />
      <Label x={cx + r + e / 2} y={cy + 38} size={11} fill={ink.muted}>
        M + 2 nodes
      </Label>
      <line x1={cx + r + e - 4} y1={cy - 28} x2={cx + r + e - 30} y2={cy - 28} stroke={method.boundary} strokeWidth={1.6} markerEnd={arrow('cau', 1)} />
      <Label x={470} y={96} size={11.5} fill={ink.secondary} anchor="start">
        after M steps, the influence of the
      </Label>
      <Label x={470} y={112} size={11.5} fill={ink.secondary} anchor="start">
        outer edge reaches at most M nodes in
      </Label>
      <Label x={470} y={148} size={11.5} fill={method.fd2} anchor="start">
        the region never feels it: its
      </Label>
      <Label x={470} y={164} size={11.5} fill={method.fd2} anchor="start">
        values are the free-space ones
      </Label>
    </Figure>
  )
}

/** The mirror rooms and image sources of a rectangular room, in plan. */
export function Images() {
  const W = 120
  const H = 72
  const ox = 358 - 1.5 * W
  const oy = 20
  const xs = 0.3
  const ys = 0.62
  const xr = 0.72
  const yr = 0.3
  const rooms: ReactElement[] = []
  const imgs: ReactElement[] = []
  let chosen: [number, number] = [0, 0]
  for (let a = -1; a <= 1; a++) {
    for (let b = -1; b <= 1; b++) {
      const x = ox + (a + 1) * W
      const y = oy + (b + 1) * H
      rooms.push(
        <rect
          key={`r${a}${b}`}
          x={x}
          y={y}
          width={W}
          height={H}
          fill={a === 0 && b === 0 ? faded(method.fd2, 0.85) : 'none'}
          stroke={a === 0 && b === 0 ? ink.secondary : ink.axis}
          strokeWidth={a === 0 && b === 0 ? 2 : 1}
        />,
      )
      // the image in room (a, b) is mirrored once for every odd index
      const fx = a % 2 === 0 ? xs : 1 - xs
      const fy = b % 2 === 0 ? ys : 1 - ys
      const px = x + fx * W
      const py = y + fy * H
      if (a === 1 && b === 0) chosen = [px, py]
      imgs.push(
        <Node
          key={`i${a}${b}`}
          x={px}
          y={py}
          r={a === 0 && b === 0 ? 5 : 4}
          fill={a === 0 && b === 0 ? method.waveguide : faded(method.waveguide, 0.35)}
        />,
      )
    }
  }
  const R: [number, number] = [ox + W + xr * W, oy + H + yr * H]
  const S: [number, number] = [ox + W + xs * W, oy + H + ys * H]
  // the path from the image in the right-hand room crosses the shared wall
  const wx = ox + 2 * W
  const t = (wx - chosen[0]) / (R[0] - chosen[0])
  const hitY = chosen[1] + t * (R[1] - chosen[1])
  return (
    <Figure
      width={716}
      height={262}
      caption="Image sources, in plan. The real room is in the middle, with its source (orange) and listener (white). Each neighbouring room is its mirror image in a wall, with a mirror-image source in it. The straight line from the image on the right to the listener (dashed) crosses the shared wall exactly where the real reflected path (solid) bounces off it, and has the same length; so the reflection arrives when, and as strongly as, sound from the image would, times the wall's reflection factor."
    >
      {rooms}
      {imgs}
      <line x1={chosen[0]} y1={chosen[1]} x2={R[0]} y2={R[1]} stroke={method.boundary} strokeWidth={1.4} strokeDasharray="5 4" />
      <path d={`M${S[0]} ${S[1]}L${wx} ${hitY}L${R[0]} ${R[1]}`} fill="none" stroke={method.boundary} strokeWidth={2} />
      <line x1={S[0]} y1={S[1]} x2={R[0]} y2={R[1]} stroke={faded(ink.node, 0.4)} strokeWidth={1.4} />
      <Node x={R[0]} y={R[1]} r={5} fill={ink.node} />
      <Label x={S[0] - 8} y={S[1] + 14} size={11} fill={method.waveguide} anchor="end">
        source
      </Label>
      <Label x={R[0] - 4} y={R[1] - 12} size={11} fill={ink.secondary} anchor="middle">
        listener
      </Label>
      <Label x={chosen[0] + 8} y={chosen[1] + 16} size={11} fill={faded(method.waveguide, 0.1)} anchor="start">
        image
      </Label>
    </Figure>
  )
}