<template>
	<div class="le-flow-chart">
		<FlowChartToolbar v-if="toolbar" @view-data="handlePreview" />
		<div ref="lfElRef" class="chart-ref"></div>
		<el-dialog v-model="visible" class="le-dialog" title="流程数据" width="50%">
			<div class="test">{{ graphData }}</div>
			<!--			<JsonPreview :data="graphData" />-->
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import type { Ref, PropType } from 'vue'
import type { Definition } from '@logicflow/core'
import { ref, onMounted, unref, nextTick, computed, watch } from 'vue'
import FlowChartToolbar from './FlowChartToolbar.vue'
import LogicFlow from '@logicflow/core'
import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension'
import { createFlowChartContext } from './useFlowContext'
import { toLogicFlowData } from './adpterForTurbo'
// import { JsonPreview } from '@/components/CodeEditor'
import { configDefaultDndPanel } from './config'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

defineOptions({ name: 'LeFlowChart' })

const props = defineProps({
	flowOptions: {
		type: Object as PropType<Definition>,
		default: () => ({})
	},

	data: {
		type: Object as PropType<any>,
		default: () => ({})
	},

	toolbar: {
		type: Boolean,
		default: true
	},
	patternItems: {
		type: Array
	}
})

const lfElRef = ref(null)
const graphData = ref({})

const lfInstance = ref(null) as Ref<LogicFlow | null>
const visible = ref(false)
// const appStore = useAppStore()
createFlowChartContext({
	logicFlow: lfInstance as unknown as LogicFlow
})

const getFlowOptions = computed(() => {
	const { flowOptions } = props

	const defaultOptions: Partial<Definition> = {
		grid: true,
		background: {
			// color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515'
			color: '#f7f9ff'
		},
		keyboard: {
			enabled: true
		},
		...flowOptions
	}
	return defaultOptions as Definition
})

watch(
	() => props.data,
	() => {
		onRender()
	}
)

// TODO
// watch(
//   () => appStore.getDarkMode,
//   () => {
//     init();
//   }
// );

watch(
	() => unref(getFlowOptions),
	options => {
		unref(lfInstance)?.updateEditConfig(options)
	}
)

// init logicFlow
async function init() {
	await nextTick()

	const lfEl = unref(lfElRef)
	if (!lfEl) {
		return
	}
	LogicFlow.use(DndPanel)

	// Canvas configuration
	LogicFlow.use(Snapshot)
	// Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
	LogicFlow.use(BpmnElement)
	// Start the right-click menu
	LogicFlow.use(Menu)
	LogicFlow.use(SelectionSelect)

	lfInstance.value = new LogicFlow({
		...unref(getFlowOptions),
		container: lfEl
	})
	const lf = unref(lfInstance)!
	// lf?.setDefaultEdgeType('line')
	onRender()
	// 设置拖拽面板
	lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf))
}

async function onRender() {
	await nextTick()
	const lf = unref(lfInstance)
	if (!lf) {
		return
	}
	const lFData = toLogicFlowData(props.data)
	lf.render(lFData)
}

function handlePreview() {
	const lf = unref(lfInstance)
	if (!lf) {
		return
	}
	const data = unref(lf).getGraphData()
	graphData.value = data
	console.error(data, 'data')
	visible.value = true
}

onMounted(init)
</script>
<style lang="scss">
.#{$prefix}flow-chart {
	height: 100%;
	.chart-ref {
		height: 100%;
	}
	&_toolbar {
		&__icon {
		}
	}
}
</style>
