import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { createCircularLayout } from '@graphora/layouts'
import { Graph } from '@graphora/react'

import './style.css'

const graph = {
  nodes: [
    { id: 'ingest', label: 'Ingest', position: { x: -120, y: -40 } },
    { id: 'model', label: 'Model' },
    { id: 'render', label: 'Render' },
    { id: 'interact', label: 'Interact' }
  ],
  edges: [
    { source: 'ingest', target: 'model', directed: true },
    { source: 'model', target: 'render', directed: true },
    { source: 'render', target: 'interact', directed: true },
    { source: 'interact', target: 'model', directed: true }
  ]
}

function App(): React.ReactElement {
  return (
    <Graph
      graph={graph}
      layout={createCircularLayout({ radius: 135 })}
      fitToViewOnLayout={{ padding: 56 }}
      ariaLabel="Basic React graph example"
      className="graph-surface"
      theme={{
        backgroundColor: '#ffffff',
        node: { fill: '#1f6f8b', radius: 20 },
        edge: { stroke: '#708390', strokeWidth: 2 },
        label: { visible: true, fill: '#1f2933' }
      }}
    />
  )
}

createRoot(document.querySelector('#root') as HTMLElement).render(<App />)