import { Path, Svg } from "@react-pdf/renderer";
import type { DecorItem } from "../blocks/FirstPageHeader";
import type { PageFrame } from "../engine/geometry";

/*
 * Purple Pop's art, measured on the Canva A4 page (docs/templates/12-purple-pop.md): an 8-arm asterisk normalised
 * to a 0-100 box (every arm is 16.5% of the size), a yellow dome, and the huge pale watermark asterisks.
 */
export const ASTERISK_PATH =
  "M100 41.7H69.9L91.1 20.6 79.7 8.9 58.3 30.1V0H41.7V30.1L20.6 8.9 8.9 20.6 30.1 41.7H0V58.3H30.1L8.9 79.4 20.6 91.1 41.7 69.9V100H58.3V69.9L79.4 91.1 91.1 79.4 69.9 58.3H100Z";

/** The yellow dome in A4 page coordinates; its box is DOME_BOX. */
export const DOME_PATH =
  "M89.7,565.3 C107.7,565.3 122.3,579.9 122.3,597.9 L103.3,597.9 C114.5,603.1 122.3,614.4 122.3,627.6 L57.0,627.6 C57.0,614.4 64.8,603.1 76.1,597.9 L57.0,597.9 C57.0,579.9 71.7,565.3 89.7,565.3 Z";
export const DOME_BOX = { x: 57.0, y: 565.3, w: 65.3, h: 62.3 } as const;

/** A solid asterisk of side `size`, in the flow. */
export function Asterisk({ size, color }: { size: number; color: string }) {
  return (
    <Svg width={size} height={size} viewBox="0 0 100 100">
      <Path d={ASTERISK_PATH} fill={color} />
    </Svg>
  );
}

/** The dome at its Canva size scaled so it is `width` wide. */
export function Dome({ width, color }: { width: number; color: string }) {
  const k = width / DOME_BOX.w;
  return (
    <Svg width={width} height={DOME_BOX.h * k} viewBox={`${DOME_BOX.x} ${DOME_BOX.y} ${DOME_BOX.w} ${DOME_BOX.h}`}>
      <Path d={DOME_PATH} fill={color} fillRule="evenodd" />
    </Svg>
  );
}

/** The two pale watermarks: 352.4 pt asterisks, one hanging off the top right and one off the bottom left. */
export const WATERMARK = { size: 352.4, topRight: { overhangRight: 12.4, overhangTop: 51.4 }, bottomLeft: { overhangLeft: 58, overhangBottom: 21.55 } } as const;

export type WatermarkCorner = "top-right" | "bottom-left";

/**
 * A watermark as a decor item anchored to its page corner. The part that falls off the page is cut away
 * with the Svg's viewBox rather than drawn outside the page, so the box always lies on the page (on Letter
 * too, where the corner moves with the page).
 */
export function asteriskWatermark(frame: PageFrame, corner: WatermarkCorner, color: string): DecorItem {
  const { width: pw, height: ph } = frame.page;
  const s = WATERMARK.size;
  const pct = (v: number) => (v / s) * 100;
  if (corner === "top-right") {
    const w = s - WATERMARK.topRight.overhangRight;
    const h = s - WATERMARK.topRight.overhangTop;
    return {
      x: pw - w,
      y: 0,
      width: w,
      height: h,
      children: (
        <Svg width={w} height={h} viewBox={`${pct(WATERMARK.topRight.overhangRight)} ${pct(WATERMARK.topRight.overhangTop)} ${pct(w)} ${pct(h)}`}>
          <Path d={ASTERISK_PATH} fill={color} />
        </Svg>
      ),
    };
  }
  const w = s - WATERMARK.bottomLeft.overhangLeft;
  const h = s - WATERMARK.bottomLeft.overhangBottom;
  return {
    x: 0,
    y: ph - h,
    width: w,
    height: h,
    children: (
      <Svg width={w} height={h} viewBox={`${pct(WATERMARK.bottomLeft.overhangLeft)} 0 ${pct(w)} ${pct(h)}`}>
        <Path d={ASTERISK_PATH} fill={color} />
      </Svg>
    ),
  };
}