<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import { onMounted, ref } from 'vue';
import Konva from 'konva/lib';
import { Rect } from 'konva/lib/shapes/Rect';

const { width, height } = useWindowSize();
const yellowBox = ref<Rect>();

const initial = () => {
	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
	const layer = new Konva.Layer();
	stage.add(layer);

	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

	for (let n = 0; n < 6; n++) {
		(function () {
			const i = n;
			const box = new Konva.Rect({
				x: i * 30 + 210,
				y: i * 18 + 40,
				width: 100,
				height: 50,
				fill: colors[i],
				stroke: 'black',
				strokeWidth: 4,
				draggable: true,
				name: colors[i],
			});

			box.on('mouseover', function () {
				document.body.style.cursor = 'pointer';
			});
			box.on('mouseout', function () {
				document.body.style.cursor = 'default';
			});
			if (colors[i] === 'yellow') {
				yellowBox.value = box;
			}
			layer.add(box);
		})();
	}

	stage.add(layer);
};

onMounted(() => {
	initial();
});
</script>

<template>
	<div class="container-fluid">
		<div id="buttons">
			<button id="toTop" class="btn btn-warning" @click="yellowBox?.moveToTop()">Move yellow box to top</button>
			<button id="toBottom" class="btn btn-outline-info" @click="yellowBox?.moveToBottom()">Move yellow box to bottom</button>
			<button id="up" class="btn btn-outline-warning" @click="yellowBox?.moveUp()">Move yellow box up</button>
			<button id="down " class="btn btn-info" @click="yellowBox?.moveDown()">Move yellow box down</button>
			<button id="zIndex" class="btn btn-primary" @click="yellowBox?.setZIndex(3)">Set yellow box zIndex to 3</button>
		</div>
		<div id="container"></div>
	</div>
</template>

<style scoped lang="scss"></style>
