import { flowring } from "flowring";

const ring = flowring(document.getElementById("container"), {
  topN: 12,
  direction: "inbound",
  subtitle: "Net Migration Rank",
});

ring.update(
  { id: "seoul", label: "Seoul", coord: [400, 300] },
  [
    { id: "busan", label: "Busan", coord: [700, 400], value: 1200 },
    { id: "daegu", label: "Daegu", coord: [600, 350], value: 800 },
    { id: "incheon", label: "Incheon", coord: [350, 250], value: 650 },
  ]
);

import { flowring } from "flowring";

const ring = flowring(document.getElementById("container"), {
  // Data display
  topN: 10,
  total: 50000,
  direction: "outbound",
  subtitle: "Outbound Transfer Rank",

  // Appearance
  radiusFraction: 0.25,
  arcThickness: 16,
  colors: {
    arc: "rgb(30, 120, 220)",
    stroke: "white",
    buffer: "black",
    dim: "#aaaaaa",
    arcByRank: (rank) => (rank < 3 ? "rgb(255, 80, 40)" : "rgb(30, 120, 220)"),
  },

  // Animation
  animate: true,
  blinkCount: 3,
  blinkInterval: 150,

  // Projection (for map usage)
  projection: (coord) => {
    const p = map.project(coord);
    return { x: p.x, y: p.y };
  },

  // Callbacks
  formatLabel: (datum, rank) => `#${rank} ${datum.label} (${datum.value.toLocaleString()})`,
  formatTitle: (source, subtitle) => [source.label, subtitle],
  onRender: (time) => console.log("rendered at", time),
  onBlink: (opacities) => {
    // Sync external elements with blink state
    opacities.forEach((opacity, i) => {
      document.querySelector(`.rank-${i}`)?.style.setProperty("opacity", String(opacity));
    });
  },
});

// source: the center region
const source = { id: "seoul", label: "Seoul", coord: [126.978, 37.566] };

// data: ranked counterparts (array order = rank order)
const data = [
  { id: "suwon", label: "Suwon", coord: [127.0, 37.27], value: 1200 },
  { id: "incheon", label: "Incheon", coord: [126.7, 37.45], value: 980 },
  { id: "goyang", label: "Goyang", coord: [126.83, 37.65], value: 750 },
  // ...up to topN items
];

ring.update(source, data);
map.on("move", () => ring.render());

import { flowring } from "flowring";

const ring = flowring(document.getElementById("diagram"), {
  topN: 8,
  direction: "outbound",
  subtitle: "Transfer Volume",
  formatLabel: (d, rank) => `${d.label}: ${d.value}%`,
});

ring.update(
  { id: "hq", label: "Headquarters", coord: [400, 300] },
  [
    { id: "east", label: "East Region", coord: [700, 200], value: 340 },
    { id: "west", label: "West Region", coord: [100, 200], value: 280 },
    { id: "south", label: "South Region", coord: [400, 550], value: 150 },
  ]
);

import { flowring } from "flowring";

// map: your MapLibre GL instance
// overlayDiv: a div positioned over the map
const ring = flowring(overlayDiv, {
  projection: (coord) => {
    const p = map.project(coord);
    return { x: p.x, y: p.y };
  },
  direction: "inbound",
  animate: true,
  blinkCount: 3,
});

// Re-render on map movement
map.on("move", () => ring.render());

// Update on hover
ring.update(
  { id: "seoul", label: "Seoul", coord: [126.978, 37.566] },
  [
    { id: "suwon", label: "Suwon", coord: [127.0, 37.27], value: 1200 },
    { id: "incheon", label: "Incheon", coord: [126.7, 37.45], value: 980 },
  ]
);

// Cleanup
ring.destroy();

// geojson: your region boundaries FeatureCollection
// selectedRegionCode: code of the hovered source region
// rankMap: Map<code, rankIndex> built from flowring data
new GeoJsonLayer({
  id: "region-highlight",
  data: geojson,
  filled: true,
  stroked: false,
  pickable: true,
  getFillColor: (d) => {
    const code = Number(d.properties.code);
    // Green for the hovered source region
    if (code === selectedRegionCode) return [23, 115, 58, 255];
    // Yellow-green for ranked counterparts
    if (rankMap.has(code)) return [174, 242, 2, 180];
    // Transparent for the rest
    return [0, 0, 0, 0];
  },
  updateTriggers: { getFillColor: [selectedRegionCode, rankMap] },
});

import { getBlinkOpacity } from "flowring";

// blinkTime: from useFlowring() hook or createBlinkTimer()
new GeoJsonLayer({
  id: "region-highlight",
  data: geojson,
  filled: true,
  getFillColor: (d) => {
    const code = Number(d.properties.code);
    if (code === selectedRegionCode) return [23, 115, 58, 255];
    const rankIdx = rankMap.get(code);
    if (rankIdx !== undefined) {
      // Top 3 blink in sync with the SVG overlay
      const opacity = rankIdx < 3 ? getBlinkOpacity(blinkTime, rankIdx) : 1;
      return [174, 242, 2, 180 * opacity];
    }
    return [0, 0, 0, 0];
  },
  updateTriggers: { getFillColor: [selectedRegionCode, rankMap, blinkTime] },
});

import { getBlinkOpacity, BLINK_CYCLE, BLINK_DELAYS } from "flowring";

// Returns 0 or 1
const opacity = getBlinkOpacity(elapsedSeconds, rankIndex);