<script setup lang="ts">
import { computed } from 'vue'
import NodeDefault from './NodeDefault.vue'
import NodeStickyNote from './NodeStickyNote.vue'
import NodeLoop from './NodeLoop.vue'
import NodeIcon from './NodeIcon.vue'

import type { Connection } from '@vue-flow/core'
import type { XYPosition, ConnectStartEvent, CanvasNodeMoveEvent } from '../../../../Interface'
import { useCanvasNodeContext } from '../../../../hooks/useCanvasNodeContext'

const node = useCanvasNodeContext()

const nodeType = computed(() => node.props.value.data?.nodeType)

defineEmits<{
	'click:node': [id: string, position: XYPosition]
	'dblclick:node': [id: string, position: XYPosition]
	'click:node:add': [payload: { nodeId: string; handleId: string; event?: MouseEvent }]
	'add-inner-node': []
	'add-inner-edge': [connection: Connection]
	'create:connection:cancelled': [payload: { handle: ConnectStartEvent; position: XYPosition; event?: MouseEvent }]
	'loop:child:click:node': [id: string, position: XYPosition]
	'loop:child:dblclick:node': [id: string, position: XYPosition]
	'loop:child:click:node:add': [
		payload: { nodeId: string; handle: string; position: XYPosition; event?: MouseEvent }
	]
	'loop:child:create:connection:end': [connection: Connection, event?: MouseEvent]
	'loop:child:update:node:attrs': [id: string, attrs: Record<string, unknown>]
	'loop:child:update:nodes:position': [events: CanvasNodeMoveEvent[]]
	'loop:child:create:connection:cancelled': [
		payload: { handle: ConnectStartEvent; position: XYPosition; event?: MouseEvent }
	]
	'loop:child:run:node': [id: string]
	'loop:child:delete:node': [id: string]
	'loop:child:delete:connection': [connection: Connection]
	'loop:child:click:connection:add': [connection: Connection]
}>()
</script>

<template>
	<NodeStickyNote v-if="nodeType === 'stickyNote'" v-bind="$attrs" />
	<NodeLoop
		v-else-if="nodeType === 'loop' || nodeType === 'iteration'"
		v-bind="$attrs"
		@add-inner-node="$emit('add-inner-node')"
		@loop:child:click:node="(id, position) => $emit('loop:child:click:node', id, position)"
		@loop:child:dblclick:node="
			(id, position) => $emit('loop:child:dblclick:node', id, position)
		"
		@loop:child:click:node:add="$emit('loop:child:click:node:add', $event)"
		@loop:child:create:connection:end="
			(connection, event) => $emit('loop:child:create:connection:end', connection, event)
		"
		@loop:child:update:node:attrs="
			(id, attrs) => $emit('loop:child:update:node:attrs', id, attrs)
		"
		@loop:child:update:nodes:position="$emit('loop:child:update:nodes:position', $event)"
		@loop:child:create:connection:cancelled="
			$emit('loop:child:create:connection:cancelled', $event)
		"
		@loop:child:run:node="$emit('loop:child:run:node', $event)"
		@loop:child:delete:node="$emit('loop:child:delete:node', $event)"
		@loop:child:delete:connection="$emit('loop:child:delete:connection', $event)"
		@loop:child:click:connection:add="$emit('loop:child:click:connection:add', $event)"
	/>
	<NodeIcon v-else-if="nodeType?.includes('-start')" v-bind="$attrs" />
	<NodeDefault v-else v-bind="$attrs"> </NodeDefault>
</template>
