import { createGraphEngine } from '@graphora/engine'
import { createCircularLayout } from '@graphora/layouts'
import { CanvasGraphRenderer, createViewport } from '@graphora/renderer'

import './style.css'

const container = document.querySelector<HTMLDivElement>('#graph')

if (container === null) {
  throw new Error('Missing graph container.')
}

const engine = createGraphEngine({
  graph: {
    nodes: [
      { id: 'gateway', label: 'Gateway' },
      { id: 'orders', label: 'Orders' },
      { id: 'database', label: 'Database' }
    ],
    edges: [
      {
        id: 'gateway-orders',
        source: 'gateway',
        target: 'orders',
        directed: true
      },
      {
        id: 'orders-database',
        source: 'orders',
        target: 'database',
        directed: true
      }
    ]
  },
  renderer: new CanvasGraphRenderer(),
  layout: createCircularLayout({ radius: 120 }),
  viewport: createViewport({
    width: container.clientWidth,
    height: container.clientHeight
  }),
  theme: {
    backgroundColor: '#f8fafc',
    node: { fill: '#2563eb', radius: 22 },
    edge: { stroke: '#64748b', strokeWidth: 2, arrow: { end: true } },
    label: { visible: true, fill: '#0f172a', fontSize: 13 }
  }
})

engine.mount(container)
window.addEventListener('pagehide', () => engine.destroy(), { once: true })

void engine
  .runLayout({ fitToView: { padding: 48 } })
  .catch((error: unknown) => {
    engine.destroy()
    console.error(error)
  })