import './style.css'
import Graph from "https://esm.sh/graphology";
import Sigma from "https://esm.sh/sigma";
import forceAtlas2 from "https://esm.sh/graphology-layout-forceatlas2";

// --- Génération de données de base ---
const graph = new Graph();

const N = 30;
const colors = ["#ec635e", "#61afef", "#2c3029ff", "#e5c07b"];
for (let i = 0; i < N; i++) {
  const sex = Math.random() < 0.5 ? "F" : "M";
  const education = Math.floor(Math.random() * 4);
  const color = colors[education];
  graph.addNode(`n${i}`, {
    x: i, y: i,
    label: `${sex}${i}`,
    sex,
    education,
    size: 6 + education,
    color,
  });
}

// --- Ajout de quelques liens initiaux ---
for (let i = 0; i < N * 1.5; i++) {
  const a = `n${Math.floor(Math.random() * N)}`;
  const b = `n${Math.floor(Math.random() * N)}`;
  if (a !== b && !graph.hasEdge(a, b)) {
    graph.addEdge(a, b, { color: "#aaa", size: 1 });
  }
}


// With settings:
const positions = forceAtlas2(graph, {
  iterations: 50,
  settings: {
    gravity: 10
  }
});

// --- Placement automatique avec ForceAtlas2 ---
//forceAtlas2.assign(graph);

// --- Rendu Sigma ---
const container = document.getElementById("app");
const renderer = new Sigma(graph, container, { renderLabels: true });

// --- Fonctions dynamiques ---
function addLink(source, target) {
  if (!graph.hasEdge(source, target)) {
    graph.addEdge(source, target, { color: "#666" });
    renderer.refresh();
  }
}

function removeLink(source, target) {
  if (graph.hasEdge(source, target)) {
    graph.dropEdge(source, target);
    renderer.refresh();
  }
}

// --- Exemple d’évolution dynamique ---
setTimeout(() => addLink("n0", "n5"), 3000);
setTimeout(() => removeLink("n1", "n2"), 6000);

console.log("Graph loaded:", graph.order, "nodes,", graph.size, "edges");

//import typescriptLogo from './typescript.svg'
//import viteLogo from '/vite.svg'
//import { setupCounter } from './counter.ts'
/*
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
*/