<div id="sigma-container"></div>

<style>
  #sigma-container {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  import Graph from "graphology";
  import Sigma from "sigma";
  import { layerFill, sdfCircle, sdfDiamond, sdfSquare, sdfTriangle } from "sigma/rendering";
  import { DEFAULT_STYLES } from "sigma/types";

  import { registerControls } from "../_controls";

  const container = document.getElementById("sigma-container") as HTMLElement;

  const {
    backdropDisplay,
    backdropPadding,
    backdropCornerRadius,
    backdropBorderWidth,
    backdropShadowBlur,
    backdropLabelPadding,
  } = registerControls({
    backdropDisplay: {
      type: "select",
      label: "Display",
      default: "always",
      options: [
        { label: "Always", value: "always" },
        { label: "On hover", value: "hover" },
        { label: "Hidden", value: "hidden" },
      ],
    },
    backdropPadding: { type: "number", label: "Padding (px)", default: 6, min: 0, max: 20, step: 1 },
    backdropCornerRadius: { type: "number", label: "Corner radius (px)", default: 0, min: 0, max: 20, step: 1 },
    backdropBorderWidth: { type: "number", label: "Border width (px)", default: 0, min: 0, max: 8, step: 0.5 },
    backdropShadowBlur: { type: "number", label: "Shadow blur (px)", default: 12, min: 0, max: 30, step: 1 },
    backdropLabelPadding: { type: "number", label: "Label padding (px)", default: -1, min: -1, max: 20, step: 1 },
  });

  const nodes = [
    { id: "a", x: 0, y: 0, size: 12, shape: "circle", labelPosition: "right", label: "Circle / right" },
    { id: "b", x: 200, y: 0, size: 16, shape: "square", labelPosition: "above", label: "Square / above" },
    { id: "c", x: 400, y: 0, size: 14, shape: "diamond", labelPosition: "below", label: "Diamond / below" },
    { id: "d", x: 600, y: 0, size: 14, shape: "triangle", labelPosition: "over", label: "Triangle / over" },
    { id: "e", x: 100, y: -120, size: 10, shape: "circle", labelPosition: "left", label: "Circle / left" },
    { id: "f", x: 300, y: -120, size: 18, shape: "square", labelPosition: "right", label: "Square / right" },
    { id: "g", x: 500, y: -120, size: 12, shape: "diamond", labelPosition: "above", label: "Diamond / above" },
  ] as const;

  const graph = new Graph();
  for (const node of nodes) {
    graph.addNode(node.id, node);
  }

  const backdropVisibility =
    backdropDisplay === "hover"
      ? { whenState: "isHovered" as const, then: "visible" as const, else: "hidden" as const }
      : backdropDisplay === "hidden"
        ? ("hidden" as const)
        : ("visible" as const);

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        shapes: [sdfCircle(), sdfSquare(), sdfDiamond(), sdfTriangle()],
        layers: [layerFill()],
      },
    },
    styles: {
      nodes: [
        DEFAULT_STYLES.nodes,
        {
          size: { attribute: "size", defaultValue: 10 },
          shape: { attribute: "shape", defaultValue: "circle" },
          labelPosition: { attribute: "labelPosition", defaultValue: "right" },
        },
        {
          backdropVisibility,
          backdropColor: "white",
          backdropShadowColor: "rgba(0, 0, 0, 0.5)",
          backdropShadowBlur,
          backdropPadding,
          backdropBorderColor: "black",
          backdropBorderWidth,
          backdropCornerRadius,
          backdropLabelPadding,
          backdropArea: "both",
          zIndex: 1,
        },
      ],
    },
    settings: {
      itemSizesReference: "positions",
      zoomToSizeRatioFunction: (x: number) => x,
      autoRescale: true,
    },
  });
</script>