import { createGraphEngine } from '@graphora/engine'
import {
  BUILT_IN_NODE_SHAPES,
  CanvasGraphRenderer,
  GRAPHORA_STYLE_ATTRIBUTE,
  createViewport
} from '@graphora/renderer'
import './style.css'

const container = document.querySelector<HTMLDivElement>('#graph')!
const output = document.querySelector<HTMLOutputElement>('#picked')!
const renderer = new CanvasGraphRenderer()
const engine = createGraphEngine({
  graph: {
    nodes: BUILT_IN_NODE_SHAPES.map((shape, index) => ({
      id: shape,
      label: shape,
      position: { x: (index - 1.5) * 110, y: 0 },
      attributes: {
        [GRAPHORA_STYLE_ATTRIBUTE]: {
          shape,
          radius: 28,
          fill: ['#2563eb', '#14b8a6', '#8b5cf6', '#f59e0b'][index]!
        }
      }
    })),
    edges: [
      { id: 'line', source: 'circle', target: 'square', directed: true },
      {
        id: 'curve',
        source: 'square',
        target: 'diamond',
        directed: true,
        attributes: { [GRAPHORA_STYLE_ATTRIBUTE]: { shape: 'curve' } }
      },
      {
        id: 'forward',
        source: 'diamond',
        target: 'rounded-rect',
        directed: true
      },
      {
        id: 'reverse',
        source: 'rounded-rect',
        target: 'diamond',
        directed: true
      },
      ...BUILT_IN_NODE_SHAPES.map((shape) => ({
        id: `loop-${shape}`,
        source: shape,
        target: shape,
        directed: true
      }))
    ]
  },
  renderer,
  viewport: createViewport({
    width: container.clientWidth,
    height: container.clientHeight
  }),
  theme: { node: { strokeWidth: 2 }, edge: { strokeWidth: 2 } }
})
engine.mount(container)
container.addEventListener('click', (event) => {
  const bounds = container.getBoundingClientRect()
  const picked = renderer.pick({
    x: event.clientX - bounds.left,
    y: event.clientY - bounds.top
  })
  output.textContent =
    picked?.type === 'node'
      ? `Node: ${String(picked.nodeId)}`
      : picked?.type === 'edge'
        ? `Edge: ${String(picked.edgeId)}`
        : 'Canvas'
})