import { ref, computed } from "vue";
import card from '../components/cards/index.vue'

export class StateManager {
	vueFlow: any
	nodes: any
	edges: any
	zoom: any
	constructor(options) {
		this.vueFlow = options.vueFlow
		this.nodes = ref<any[]>([
			{
				id: '1',
				type: 'InputNode',
				class: 'custom-node start',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'to-real-style' }
			},
			{
				id: '2',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'scene-composition' }
			},
			{
				id: '3',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'color-palette' }
			},
			{
				id: '4',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'to-video' }
			},
			{
				id: '5',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'to-3d-model' }
			},
			{
				id: '6',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'to-cad' }
			},
			{
				id: '7',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'add-print' }
			},
			{
				id: '8',
				type: 'SecondaryNode',
				class: 'custom-node',
				position: { x: 0, y: 0 },
				data: { component: card, type: 'edit-material' }
			}
		]);

		this.edges = computed(() => {
			const arr = []
			this.nodes.value.forEach((node, index) => {
				if (index < this.nodes.value.length - 1) {
					const id = node.id
					const target = this.nodes.value[index + 1].id
					arr.push({
						id: `el-${id}-${target}`,
						source: id,
						target: target,
						type: 'smoothstep'
					})
				}
			})
			return arr
		})

		this.zoom = ref(1)
	}

}