<template>
	<div class="space-y-3">
		<div class="flex items-center justify-between beautify">
			<label class="text-14px font-bold text-gray-700">
				{{ t('common.nodeBase.outputVariables.title') }}
				<span class="text-red-500">*</span>
			</label>
			<el-tooltip :content="t('common.nodeBase.outputVariables.addOutput')">
				<IconButton icon="lucide:plus" class="text-gray-600" link @click="addOutput" />
			</el-tooltip>
		</div>

		<div class="space-y-2">
			<div v-for="(output, index) in outputs" :key="index" class="flex items-center gap-2 group">
				<el-input
					v-model="output.name"
					type="text"
					:placeholder="t('common.nodeBase.outputVariables.namePlaceholder')"
					class="w-1/3 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
					@input="handleOutputChange"
				/>
				<el-select
					v-if="setType"
					v-model="output.type"
					:options="variableTypeOptions"
					class="w-1/3 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white min-w-[100px]"
					@change="handleOutputChange"
				>
				</el-select>
				<VarSelect
					v-if="setValue"
					v-model="output.value"
					class="flex-1"
					:placeholder="t('common.nodeBase.outputVariables.setValuePlaceholder')"
					@change="(val) => val && (output.type = val.type as NodeVariableType)"
				/>
				<IconButton link icon="lucide:trash-2" class="text-red-500" @click="removeOutput(index)" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { IconButton } from '@repo/ui'
import VarSelect from './VarSelect.vue'
import { VARIABLE_TYPE_OPTIONS } from '@/constant'
import { useI18n } from '@/composables/useI18n'
import type { NodeVariable, NodeVariableType } from '@/nodes/Interface'

interface Props {
	modelValue: NodeVariable[]
	setType?: boolean
	setValue?: boolean
}

interface Emits {
	(e: 'update:modelValue', value: NodeVariable[]): void
}

const props = withDefaults(defineProps<Props>(), {
	setType: true,
	setValue: false
})
const emit = defineEmits<Emits>()
const { t } = useI18n()

const outputs = ref<NodeVariable[]>(props.modelValue || [])
const variableTypeOptions = computed(() =>
	VARIABLE_TYPE_OPTIONS.map((item) => ({
		...item,
		label: getVariableTypeLabel(item.value)
	}))
)

watch(
	() => props.modelValue,
	(newVal) => {
		outputs.value = newVal || []
	}
)

const addOutput = () => {
	const newOutput: NodeVariable = {
		name: `var_${outputs.value.length + 1}`,
		type: 'string'
	}
	outputs.value.push(newOutput)
	handleOutputChange()
}

const removeOutput = (index: number) => {
	outputs.value.splice(index, 1)
	handleOutputChange()
}

const handleOutputChange = () => {
	emit('update:modelValue', outputs.value)
}

const getVariableTypeLabel = (type?: string) => {
	const labelMap: Record<string, string> = {
		string: t('common.nodeBase.valueTypes.string'),
		number: t('common.nodeBase.valueTypes.number'),
		boolean: t('common.nodeBase.valueTypes.boolean'),
		object: t('common.nodeBase.valueTypes.object'),
		'array[string]': t('common.nodeBase.valueTypes.arrayString'),
		'array[number]': t('common.nodeBase.valueTypes.arrayNumber'),
		'array[boolean]': t('common.nodeBase.valueTypes.arrayBoolean'),
		'array[object]': t('common.nodeBase.valueTypes.arrayObject'),
		'array[file]': t('common.nodeBase.valueTypes.arrayFile')
	}

	return type ? labelMap[type] || type : ''
}
</script>

<style lang="less" scoped>
.beautify {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
</style>
