<script lang="ts">
  import type { ChangeEventHandler } from 'svelte/elements';
  import { writable } from 'svelte/store';
  import {
    SvelteFlow,
    Controls,
    Background,
    BackgroundVariant,
    MiniMap,
    Position,
    type Node,
    type NodeTypes,
    type Edge,
    type Connection
  } from '../../lib/index';
  import { CustomNode } from './CustomNode';

  const nodeTypes: NodeTypes = {
    colorNode: CustomNode
  };

  const bgColor = writable('#1A192B');

  const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    nodes.update((nds) =>
      nds.map((node) => {
        if (node.type !== 'colorNode') {
          return node;
        }

        const color = (event.target as HTMLInputElement)?.value;

        bgColor.set(color);

        return {
          ...node,
          data: {
            ...node.data,
            color
          }
        };
      })
    );
  };

  const nodes = writable<Node[]>([
    {
      id: '1',
      type: 'input',
      data: { label: 'An input node' },
      position: { x: 0, y: 50 },
      sourcePosition: Position.Right
    },
    {
      id: '2',
      type: 'colorNode',
      data: { onChange: onChange, color: $bgColor },
      style: 'border: 1px solid #777; padding: 10px',
      position: { x: 250, y: 50 }
    },
    {
      id: '2a',
      type: 'colorNode',
      data: { onChange: onChange, color: $bgColor },
      style: 'border: 1px solid #777; padding: 10px',
      position: { x: 250, y: 520 }
    },
    {
      id: '3',
      type: 'output',
      data: { label: 'Output A' },
      position: { x: 650, y: 25 },
      targetPosition: Position.Left
    },
    {
      id: '4',
      type: 'output',
      data: { label: 'Output B' },
      position: { x: 650, y: 120 },
      targetPosition: Position.Left
    }
  ]);

  const edges = writable<Edge[]>([
    {
      id: 'e1-2',
      source: '1',
      target: '2',
      animated: true
    },
    {
      id: 'e2a-3',
      source: '2',
      sourceHandle: 'a',
      target: '3',
      animated: true
    },
    {
      id: 'e2b-4',
      source: '2',
      sourceHandle: 'b',
      target: '4',
      animated: true
    }
  ]);

  const onConnect = (connection: Connection) => {
    console.log('on connect', connection);
  };
</script>

<SvelteFlow
  {nodes}
  {edges}
  {nodeTypes}
  style="--bgcolor: {$bgColor}"
  fitView
  on:connect={onConnect}
>
  <Controls />
  <Background variant={BackgroundVariant.Dots} />
  <MiniMap />
</SvelteFlow>

<style>
  :global(.svelte-flow) {
    background: var(--bgcolor);
  }
</style>
