<script lang="ts" setup>
import { computed } from 'vue'
import { IconButton } from '@repo/ui'

import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import Condition from '@/nodes/_base/condition/index.vue'
import LoopVar from './components/LoopVar.vue'
import { useSetterModel } from '../_shared/useSetterModel'
import { useI18n } from '@/composables/useI18n'

import type { LoopData } from './index'
import type { ConditionType } from '@/nodes/Interface'

const props = defineProps<{
	data: LoopData
}>()

const emit = defineEmits<{
	update: [data: LoopData]
}>()

const { t } = useI18n()
const texts = computed(() => ({
	variables: t('pages.loopSetter.variables'),
	conditions: t('pages.loopSetter.conditions'),
	maxLoopCount: t('pages.loopSetter.maxLoopCount')
}))

const formData = useSetterModel<LoopData>(props, emit)
const variableKeyMap = new WeakMap<object, number>()
let variableKeySeed = 0

const getVariableKey = (variable: LoopData['variables'][number]) => {
	const cachedKey = variableKeyMap.get(variable)

	if (cachedKey) return cachedKey

	const nextKey = ++variableKeySeed
	variableKeyMap.set(variable, nextKey)

	return nextKey
}

const handleAddLoopVar = () => {
	formData.value.variables.push({
		name: '',
		describe: '',
		type: 'string',
		value: ''
	})
}

const handleRemoveLoopVar = (index: number) => {
	formData.value.variables.splice(index, 1)
}

const onUpdateConditions = (conditions: ConditionType[]) => {
	formData.value.break_conditions = conditions
}

const onUpdateOperator = (operator: 'and' | 'or') => {
	formData.value.logical_operator = operator
}
</script>

<template>
	<el-scrollbar class="w-full box-border p-12px">
		<el-form label-width="50px">
			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">{{ texts.variables }}</label>
					<IconButton icon="lucide:plus" link @click="handleAddLoopVar" />
				</div>
				<div
					v-for="(variable, index) in formData.variables"
					:key="getVariableKey(variable)"
					class="w-full mt-12px"
				>
					<div class="w-full flex items-start gap-12px">
						<LoopVar class="flex-1" :variable="variable" />
						<IconButton icon="lucide:trash-2" link @click="handleRemoveLoopVar(index)" />
					</div>
				</div>
			</el-form-item>

			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">{{ texts.conditions }}</label>
				</div>
				<Condition
					:conditions="formData.break_conditions"
					:operator="formData.logical_operator"
					@update:conditions="onUpdateConditions"
					@update:operator="onUpdateOperator"
				/>
			</el-form-item>

			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">{{ texts.maxLoopCount }}</label>
				</div>
				<div class="w-full flex gap-12px">
					<el-input-number v-model="formData.loop_count" :min="1" :max="100" />
					<div class="flex-2/3">
						<el-slider v-model="formData.loop_count" :min="1" :max="100" />
					</div>
				</div>
			</el-form-item>
			<NodeRuntimeConfig v-model="formData" />
		</el-form>
	</el-scrollbar>
</template>
