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

import './style.css'

const container = document.querySelector<HTMLDivElement>('#graph')
const exportButton = document.querySelector<HTMLButtonElement>('#export-image')
const status = document.querySelector<HTMLOutputElement>('#export-status')

if (container === null || exportButton === null || status === null) {
  throw new Error('Missing image export example elements.')
}

void main()

async function main(): Promise<void> {
  const renderer = new CanvasGraphRenderer()
  const engine = createGraphEngine({
    graph: {
      nodes: [
        {
          id: 'ingest',
          label: 'Ingest',
          attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { fill: '#0f766e' } }
        },
        {
          id: 'normalize',
          label: 'Normalize',
          attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { fill: '#2563eb' } }
        },
        {
          id: 'layout',
          label: 'Layout',
          attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { fill: '#7c3aed' } }
        },
        {
          id: 'render',
          label: 'Render',
          attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { fill: '#db2777' } }
        },
        {
          id: 'export',
          label: 'Export',
          attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { fill: '#ea580c' } }
        }
      ],
      edges: [
        { id: 'ingest-normalize', source: 'ingest', target: 'normalize' },
        { id: 'normalize-layout', source: 'normalize', target: 'layout' },
        { id: 'layout-render', source: 'layout', target: 'render' },
        { id: 'render-export', source: 'render', target: 'export' }
      ]
    },
    renderer,
    layout: createGridLayout({ columns: 5, cellWidth: 128, cellHeight: 96 }),
    viewport: createViewport({
      width: container.clientWidth,
      height: container.clientHeight
    }),
    theme: {
      backgroundColor: '#f7fbff',
      node: { radius: 22 },
      edge: { stroke: '#475569', strokeWidth: 2 },
      label: { fontSize: 13 }
    }
  })

  engine.mount(container)
  await engine.runLayout({ fitToView: { padding: 56 } })

  container.dataset.ready = 'true'

  exportButton.addEventListener('click', () => {
    const image = renderer.exportImage({ type: 'image/png' })

    status.value = `${image.type} ${image.width}x${image.height} ${image.backgroundColor}`
    status.dataset.imageUrl = image.dataUrl
  })
}