<template>
	<transition name="fade">
		<div v-if="show" class="ai-selectbox-panel">
			<div
				v-for="item in list"
				:key="item.type"
				:class="{ active: item.type === currentTool }"
				@click="onClickItem(item.type)"
			>
				<span class="icon"><svg-icon :name="item.name" size="16" /></span>
				<span class="label">{{ item.label }}</span>
			</div>
			<button @click="onCreate">
				<span class="icon"><svg-icon name="dc-create" size="12" /></span>
				<span class="text">{{ $t('DepthCanvas.create') }}</span>
			</button>
			<button @click="onReset">
				<span class="icon"><svg-icon name="dc-reset" size="12" /></span>
				<span class="text">{{ $t('DepthCanvas.reset') }}</span>
			</button>
		</div>
	</transition>
	<brush-control-panel v-if="show" :currentTool="currentTool" style="top: 14rem" />
</template>

<script setup lang="ts">
	import { ref, inject, computed, watch } from 'vue'
	import depthSlider from './tools/depth-slider.vue'
	import { OperationType } from '../tools/layerHelper'
	import brushControlPanel from './brush-control-panel.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()

	const props = defineProps({
		currentTool: { required: true, type: [String, null] }
	})
	const stateManager = inject('stateManager') as any
	const toolManager = inject('toolManager') as any
	const tool2 = {
		[OperationType.AISELECT_DRAW]: OperationType.ERASER,
		[OperationType.AISELECT_ERASER]: OperationType.ERASER
	}
	const show = computed(() => stateManager.aiSelectboxToolManager.tools.includes(props.currentTool))
	const list = ref([
		{
			type: OperationType.AISELECT_ADD,
			name: 'dc-add_sb',
			label: t('DepthCanvas.add')
		},
		{
			type: OperationType.AISELECT_REMOVE,
			name: 'dc-remove_sb',
			label: t('DepthCanvas.remove')
		},
		{
			type: OperationType.AISELECT_DRAW,
			name: 'dc-brush_sb',
			label: t('DepthCanvas.brush')
		},
		{
			type: OperationType.AISELECT_ERASER,
			name: 'dc-erase_sb',
			label: t('DepthCanvas.erase')
		}
	])
	const onClickItem = (type: string) => {
		toolManager.setTool(type)
	}
	const onCreate = () => {
		stateManager.aiSelectboxToolManager.createSelectbox()
	}
	const onReset = () => {
		stateManager.aiSelectboxToolManager.resetDemoObject()
	}
</script>
<style lang="less" scoped>
	// 淡入淡出动画
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.ai-selectbox-panel {
		position: absolute;
		top: 8.8rem;
		left: 50%;
		transform: translateX(-50%);
		height: 4.1rem;
		padding: 0 1.7rem;
		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: 1rem;
		> div {
			display: flex;
			cursor: pointer;
			align-items: center;
			justify-content: center;
			height: 2.6rem;
			padding: 0 0.7rem;
			border-radius: 0.3rem;
			gap: 1rem;
			> .label {
				font-size: 1.4rem;
				color: #000;
			}
			&.active,
			&:hover {
				background: rgba(235, 235, 235, 0.9);
			}
		}
		> button {
			cursor: pointer;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 2.5rem;
			background-color: rgba(13, 13, 13, 1);
			color: #fff;
			font-size: 1.2rem;
			border-radius: 0.4rem;
			padding: 0 0.8rem;
			gap: 0.8rem;
			&:active {
				opacity: 0.8;
			}
		}
	}
</style>
