<script setup lang="ts">
import { Controls } from '@vue-flow/controls'
import { Icon } from '@iconify/vue'
import { ElButton } from 'element-plus'

const emit = defineEmits<{
	'reset-zoom': []
	'zoom-in': []
	'zoom-out': []
	'zoom-to-fit': []
	'tidy-up': []
	'toggle-zoom-mode': []
	'add-node': [value: { type: string } | string]
	'toggle-minimap': []
}>()

function onResetZoom() {
	emit('reset-zoom')
}

function onZoomIn() {
	emit('zoom-in')
}

function onZoomOut() {
	emit('zoom-out')
}

function onZoomToFit() {
	emit('zoom-to-fit')
}

function onToggleMinimap() {
	emit('toggle-minimap')
}
</script>

<template>
	<Controls :show-fit-view="false" :show-zoom="false" :show-interactive="false">
		<div class="flex gap-0px">
			<ElButton @click="onZoomToFit" square>
				<Icon icon="lucide:maximize" height="16" width="16" />
			</ElButton>
			<ElButton @click="onZoomIn">
				<Icon icon="lucide:zoom-in" height="16" width="16" />
			</ElButton>
			<ElButton @click="onZoomOut">
				<Icon icon="lucide:zoom-out" height="16" width="16" />
			</ElButton>
			<ElButton @click="onResetZoom">
				<Icon icon="bx:reset" height="16" width="16" />
			</ElButton>
			<ElButton @click="onToggleMinimap" square>
				<Icon icon="lucide:map" height="16" width="16" />
			</ElButton>
		</div>
	</Controls>
</template>

<style lang="less" scoped>
.el-button {
	padding: 8px;
}
</style>
