<template>
	<div v-bind="$attrs" class="flex flex-col gap-8px">
		<div class="flex items-center gap-8px">
			<Input v-model="variable.name" :placeholder="texts.name" />
			<el-select
				v-model="variable.type"
				:placeholder="texts.type"
				:options="VARIABLE_TYPE_OPTIONS"
				@change="handleTypeChange"
			/>
			<el-select
				v-model="variable.value_type"
				:placeholder="texts.valueType"
				:options="VARIABLE_VALUE_OPTIONS"
			/>
		</div>
		<div>
			<VarSelect
				v-if="variable.value_type === 'variable'"
				v-model="variable.value"
				:placeholder="texts.setValue"
			/>
			<div v-else>
				<CodeEditor
					v-if="useCode"
					:tools="false"
					v-model="variable.value"
					:placeholder="texts.value"
				/>

				<Input
					v-else-if="variable.type === 'string'"
					type="textarea"
					v-model="variable.value"
					:rows="3"
				/>

				<Input v-else-if="variable.type === 'number'" type="number" v-model="variable.value" />

				<el-radio-group v-else-if="variable.type === 'boolean'" v-model="variable.value">
					<el-radio value="true" border>True</el-radio>
					<el-radio value="false" border>False</el-radio>
				</el-radio-group>

				<div
					v-if="variable.type === 'array[boolean]'"
					class="flex flex-col gap-8px mb-12px border border-solid border-gray-200 rounded-md p-12px"
				>
					<div
						class="flex items-center gap-8px"
						v-for="(_item, index) in variable.value"
						:key="index"
					>
						<el-radio-group v-model="variable.value[index]">
							<el-radio value="true" border>True</el-radio>
							<el-radio value="false" border>False</el-radio>
						</el-radio-group>
						<IconButton icon="lucide:trash-2" link @click="handleDelete(index as number)" />
					</div>
					<el-button class="w-full" icon="lucide:plus" @click="variable.value.push('false')">
						+ {{ texts.addValue }}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

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

import { VARIABLE_TYPE_OPTIONS, VARIABLE_VALUE_OPTIONS } from '@/constant'
import VarSelect from '@/nodes/_base/VarSelect.vue'

import { useI18n } from '@/composables/useI18n'

import type { NodeVariable } from '@/nodes/Interface'

const props = defineProps<{
	variable: NodeVariable
}>()

const { t } = useI18n()

const texts = computed(() => ({
	name: t('pages.loopSetter.loopVar.name'),
	type: t('pages.loopSetter.loopVar.type'),
	valueType: t('pages.loopSetter.loopVar.valueType'),
	setValue: t('pages.loopSetter.loopVar.setValue'),
	value: t('pages.loopSetter.loopVar.value'),
	addValue: t('pages.loopSetter.loopVar.addValue')
}))

const useCode = computed(() => {
	return (
		props.variable.value_type === 'constant' &&
		['object', 'array[string]', 'array[number]', 'array[object]'].includes(props.variable.type!)
	)
})

const handleTypeChange = (value: string) => {
	if (value === 'array[boolean]') {
		props.variable.value = ['false']
	} else if (value === 'boolean') {
		props.variable.value = 'false'
	} else {
		props.variable.value = ''
	}
}

const handleDelete = (index: number) => {
	props.variable.value.splice(index, 1)
}
</script>
