import { Ref, useEffect, useRef } from 'preact/hooks'
import * as vis from 'vis-network'
import { DbEntry } from '../datas.ts'

export function DbGraph({ db }: { db: DbEntry[] }) {
	const graph = useRef<HTMLDivElement>(null)

	useEffect(() => {
		drawDb({ db, graph })
	}, [])

	return <div class='graph' ref={graph}></div>
}

function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref<HTMLDivElement> }) {
	const nodes = db.map(({ id, title, links }) => ({
		id,
		label: title,
		value: links.length,
	}))

	const edges = db.map(({ id, links }) =>
		links.map((link) => ({ from: id, to: link, value: id + link }))
	).flat()

	return new vis.Network(graph.current!, {
		nodes,
		edges,
	}, {
		nodes: {
			shape: 'dot',
		},
	})
}