import { createGraphEngine } from '@graphora/engine'
import { applyNoOverlap, createGridLayout } from '@graphora/layouts'
import {
  CanvasGraphRenderer,
  GRAPHORA_STYLE_ATTRIBUTE,
  createViewport
} from '@graphora/renderer'

import './style.css'

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

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

const teams = [
  ['ingest', 'Ingest', '#0ea5e9'],
  ['normalize', 'Normalize', '#14b8a6'],
  ['layout', 'Layout', '#f97316'],
  ['render', 'Render', '#8b5cf6'],
  ['interact', 'Interact', '#22c55e'],
  ['docs', 'Docs', '#64748b'],
  ['qa', 'QA', '#ef4444'],
  ['release', 'Release', '#eab308']
] as const

void main()

async function main(): Promise<void> {
  const graph = {
    nodes: teams.map(([id, label, fill]) => ({
      id,
      label,
      attributes: {
        [GRAPHORA_STYLE_ATTRIBUTE]: {
          fill,
          radius: label.length > 6 ? 24 : 21
        }
      }
    })),
    edges: [
      ['ingest', 'normalize'],
      ['normalize', 'layout'],
      ['layout', 'render'],
      ['render', 'interact'],
      ['docs', 'qa'],
      ['qa', 'release'],
      ['interact', 'docs']
    ].map(([source, target]) => ({
      id: `${source}-${target}`,
      source,
      target,
      attributes: {
        [GRAPHORA_STYLE_ATTRIBUTE]: {
          stroke: '#94a3b8',
          strokeWidth: 1.6
        }
      }
    }))
  }

  const renderer = new CanvasGraphRenderer()
  const engine = createGraphEngine({
    graph,
    renderer,
    viewport: createViewport({
      width: container.clientWidth,
      height: container.clientHeight
    }),
    theme: {
      backgroundColor: '#f8fafc',
      edge: { arrow: { end: true, size: 7 } },
      label: { fontSize: 12 }
    }
  })

  engine.mount(container)

  const gridResult = createGridLayout({
    columns: 4,
    cellWidth: 70,
    cellHeight: 58
  }).run(engine.snapshot())
  const readableResult = applyNoOverlap(gridResult, {
    minimumDistance: 72,
    iterations: 10
  })

  engine.applyLayoutResult(readableResult, {
    fitToView: { padding: 56 }
  })
}