<template>
	<el-scrollbar class="w-full box-border p-12px">
		<div class="basic-dataset-setter">
			<section class="section-block">
				<div class="section-title">{{ texts.datasetConfig }}</div>

				<el-form label-position="top">
					<el-form-item :label="texts.path">
						<VarInput v-model="formData.path" :placeholder="texts.pathPlaceholder" class="w-full" />
					</el-form-item>

					<el-form-item :label="texts.group">
						<VarInput
							v-model="formData.group"
							:placeholder="texts.groupPlaceholder"
							class="w-full"
						/>
					</el-form-item>

					<el-form-item :label="texts.key">
						<VarInput v-model="formData.key" :placeholder="texts.keyPlaceholder" class="w-full" />
					</el-form-item>
				</el-form>
			</section>

			<NodeRuntimeConfig v-model="formData" />
		</div>
	</el-scrollbar>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'

import NodeRuntimeConfig from '@/nodes/_base/NodeRuntimeConfig.vue'
import VarInput from '@/nodes/_base/VarInput.vue'
import { useI18n } from '@/composables/useI18n'
import { useSetterModel } from '../_shared/useSetterModel'

import type { BasicDatasetData } from './index'

interface Emits {
	(e: 'update', value: BasicDatasetData): void
}

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

const emit = defineEmits<Emits>()
const { t } = useI18n()
const formData = useSetterModel<BasicDatasetData>(props, emit)

const texts = computed(() => ({
	datasetConfig: t('pages.basicDatasetSetter.datasetConfig'),
	path: t('pages.basicDatasetSetter.path'),
	pathPlaceholder: t('pages.basicDatasetSetter.pathPlaceholder'),
	group: t('pages.basicDatasetSetter.group'),
	groupPlaceholder: t('pages.basicDatasetSetter.groupPlaceholder'),
	key: t('pages.basicDatasetSetter.key'),
	keyPlaceholder: t('pages.basicDatasetSetter.keyPlaceholder')
}))

const ensureDefaults = () => {
	formData.value.title ||= t('nodes.meta.basic-dataset.displayName')
	formData.value.type ||= 'basic-dataset'
	formData.value.path ||= ''
	formData.value.group ||= ''
	formData.value.key ||= ''
}

watch(
	formData,
	() => {
		ensureDefaults()
	},
	{ deep: true, immediate: true }
)
</script>

<style scoped lang="less">
.basic-dataset-setter {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-block {
	padding-bottom: 16px;
}

.section-title {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #374151;
}
</style>
