/* global React */
// Greek meander (key pattern) SVG components - tileable, scrolling

const MeanderTile = ({ color = "#0D0D0D", bg = "#F26522", size = 56 }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 56 56"
    aria-hidden="true"
    style={{ display: "block" }}
  >
    <rect width="56" height="56" fill={bg} />
    {/* Classic Greek key — single repeat unit */}
    <path
      d="M4 4 H52 V52 H4 Z M10 10 H46 V46 H10 Z M16 16 H40 V40 H16 Z M22 22 H34 V34 H22 Z"
      fill="none"
      stroke={color}
      strokeWidth="2"
    />
    <rect x="4" y="4" width="6" height="48" fill={color} opacity="0" />
  </svg>
);

// Better classic meander key tile (the iconic L-shape)
const KeyTile = ({ color = "#0D0D0D", bg = "#F26522", flip = false }) => {
  // 56x56 unit
  const path = "M0,40 L0,16 L16,16 L16,32 L8,32 L8,24 L24,24 L24,40 Z M32,40 L32,24 L48,24 L48,32 L40,32 L40,16 L56,16 L56,40 Z";
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="56" height="56" viewBox="0 0 56 56"
      style={{ display: "block", transform: flip ? "scaleY(-1)" : "none" }}
    >
      <rect width="56" height="56" fill={bg} />
      <path d={path} fill={color} />
    </svg>
  );
};

// Inline SVG using image asset for the meander row (using extracted PNG)
const MeanderStrip = ({ height = 56, dark = false }) => {
  return (
    <div className={`meander-strip ${dark ? "dark" : ""}`} style={{ height }}>
      <div className="meander-track">
        {[...Array(6)].map((_, i) => (
          <img key={i} src="assets/meander-row.png" alt="" style={{ height: height - 0, width: "auto" }} />
        ))}
      </div>
    </div>
  );
};

// A pure-SVG meander strip (tileable) — cleaner than the PNG row
const MeanderSvg = ({ height = 48, color = "#0D0D0D", bg = "#F26522", flip = false }) => {
  // unit width 56, unit height 56 - we scale by height/56
  const scale = height / 56;
  const unitW = 56 * scale;
  const count = 60;
  return (
    <div className="meander-strip" style={{ height, background: bg }}>
      <div className="meander-track" style={{ transform: flip ? "scaleY(-1)" : "none" }}>
        {[...Array(count * 2)].map((_, i) => (
          <KeyTileScaled key={i} color={color} bg={bg} height={height} />
        ))}
      </div>
    </div>
  );
};

const KeyTileScaled = ({ color, bg, height }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={height} height={height} viewBox="0 0 56 56"
      style={{ display: "block", flex: "0 0 auto" }}
    >
      <rect width="56" height="56" fill={bg} />
      <path
        d="M0,40 L0,16 L16,16 L16,32 L8,32 L8,24 L24,24 L24,40 Z M32,40 L32,24 L48,24 L48,32 L40,32 L40,16 L56,16 L56,40 Z"
        fill={color}
      />
    </svg>
  );
};

Object.assign(window, {
  MeanderTile,
  KeyTile,
  MeanderStrip,
  MeanderSvg,
  KeyTileScaled,
});