<template>
	<div class="header-tools">
		<template v-for="(v, i) in tools" :key="i">
			<span class="line" v-if="v.type === 'line'"></span>
			<span
				v-else
				class="icon"
				@click="onClickTool(v)"
				:class="{ active: v.name === tool, disabled: v.disabled }"
			>
				<svg-icon :name="v.icon" :size="v.iconSize" />
			</span>
		</template>
		<div>
			<button class="export" @click="emit('export')">
				<span class="icon"><svg-icon name="export" size="11" /></span>
				<span class="text">{{ $t('FlowCanvas.export') }}</span>
			</button>
			<div v-loading="true" class="mask" v-if="downloadData.status == 'loading'"></div>
		</div>
		
		<!-- <button class="import" @click="emit('import')">
			<span class="text">Import</span>
		</button> -->
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed } from 'vue'
	import { TOOLS } from '../manager/ToolManager'
	const props = defineProps({
		zoom: { default: 1, type: Number },
		step: { default: 0.1, type: Number },
		downloadData: { default: {}, type: Object }
	})
	const emit = defineEmits(['export', 'import'])
	const stateManager = inject('stateManager') as any
	const toolManager = inject('toolManager') as any
	const tool = computed(() => stateManager.tool.value)
	const historyIndex = computed(() => stateManager.historyIndex.value)
	const historyList = computed(() => stateManager.historyList.value)
	const isUndo = computed(() => !historyList.value[historyIndex.value - 1])
	const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
	const tools = ref([
		{ name: TOOLS.SELECT, icon: 'c-select', iconSize: 16, disabled: ref(false) },
		{ name: TOOLS.MOVE, icon: 'c-move', iconSize: 18, disabled: ref(false) },
		{ name: TOOLS.TEXT, icon: 'c-text', iconSize: 22, disabled: ref(false) },
		{ type: 'line' },
		{
			name: TOOLS.UNDO,
			icon: 'c-undo',
			iconSize: 18,
			disabled: isUndo,
			on: () => stateManager.undoState()
		},
		{
			name: TOOLS.REDO,
			icon: 'c-redo',
			iconSize: 18,
			disabled: isRedo,
			on: () => stateManager.redoState()
		}
	])
	const onClickTool = (tool: any) => {
		if (tool.disabled?.value) return
		if (tool.on) {
			tool.on()
		} else {
			toolManager.setTool(tool.name)
		}
	}
</script>

<style lang="less" scoped>
	.header-tools {
		position: absolute;
		top: 10.6rem;
		left: 50%;
		transform: translateX(-50%);
		height: 5rem;
		padding: 0.7rem 2.5rem;
		border: 0.2rem solid #ebebeb;
		background: #ffffff;
		border-radius: 1.1rem;
		box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);

		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		gap: 1.2rem;
		> .line {
			width: 0;
			height: 100%;
			border-left: 0.2rem solid #d9d9d9;
			border-radius: 0.2rem;
			margin: 0 0.6rem;
		}
		> .icon {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 3rem;
			height: 3rem;
			--svg-icon-color: #000;
			border-radius: 0.4rem;
			&:not(.disabled).active,
			&:not(.disabled):hover {
				background-color: #ebebeb;
			}
			&.disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
		> div{
			position: relative;
			> .mask{
				position: absolute !important;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				zoom: .6;
				pointer-events: none;
			}
		}
		button {
			// width: 10rem;
			padding: 0 2.4rem;
			height: 3rem;
			border-radius: 0.4rem;
			border: none;
			background-color: #ff7a51;
			color: #fff;
			font-size: 1.1rem;
			display: flex;
			gap: 0.8rem;
			align-items: center;
			justify-content: center;
			position: relative;
			cursor: pointer;
			&:active {
				opacity: 0.8;
			}
		}
		
	}
</style>
