<template>
	<div class="general-material-form">
		<form @submit.prevent="handleSubmit">
			<div class="general-material-form__field">
				<label for="gm-name">Name:</label>
				<NcTextField
					id="gm-name"
					:model-value="form.name"
					:placeholder="'Name des Materials'"
					:validate="form.name !== ''"
					@update:model-value="form.name = $event"
					required
				/>
			</div>

			<div class="general-material-form__field">
				<label for="gm-condition">Zustand (0–5):</label>
				<NcSelect
					id="gm-condition"
					:model-value="conditionOptions.find(o => o.value === form.condition)"
					:options="conditionOptions"
					:reduce="o => o.value"
					:clearable="true"
					@update:model-value="form.condition = $event"
				>
					<template #cell="{ option }">
						<span class="general-material-form__condition-option">
							{{ option.label }}
						</span>
					</template>
				</NcSelect>
			</div>

			<div class="general-material-form__field">
				<label for="gm-categories">Kategorien:</label>
				<NcSelect
					id="gm-categories"
					:model-value="categoryOptions.filter(o => form.categories?.includes(o.value))"
					:options="categoryOptions"
					multiple
					:reduce="o => o.value"
					:close-on-select="false"
					@update:model-value="form.categories = $event.map(o => o.value)"
				/>
			</div>

			<div class="general-material-form__field">
				<label for="gm-notes">Notizen:</label>
				<NcTextField
					id="gm-notes"
					:type="'textarea'"
					:model-value="form.notes"
					:placeholder="'Zusätzliche Notizen...'"
					:multiple-lines="true"
					@update:model-value="form.notes = $event"
				/>
			</div>

			<div class="general-material-form__actions">
				<NcButton type="tertiary" @click="$emit('close')">
					Abbrechen
				</NcButton>
				<NcButton type="primary" :disabled="!isFormValid" @click="handleSubmit">
					{{ form.name ? (editMode ? 'Speichern' : 'Erstellen') : 'Speichern' }}
				</NcButton>
			</div>
		</form>
	</div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { NcTextField, NcSelect, NcButton } from '@nextcloud/vue'

const props = defineProps({
	item: {
		type: Object,
		default: null,
	},
	categories: {
		type: Array,
		default: () => [],
	},
})

const emit = defineEmits(['update', 'close'])

const editMode = computed(() => !!props.item)

const form = ref({
	name: '',
	condition: null,
	categories: [],
	notes: '',
})

const conditionOptions = computed(() => {
	const options = []
	for (let i = 0; i <= 5; i++) {
		options.push({ value: i, label: i === 0 ? '0 (sehr schlecht)' : i === 5 ? '5 (hervorragend)' : String(i) })
	}
	return options
})

const categoryOptions = computed(() => {
	return props.categories.map(c => ({
		value: c.id,
		label: c.name,
	}))
})

const isFormValid = computed(() => form.value.name !== '')

// Load existing item data
watch(() => props.item, (newVal) => {
	if (newVal) {
		form.value = {
			name: newVal.name || '',
			condition: newVal.condition ?? null,
			categories: newVal.categories || [],
			notes: newVal.notes || '',
		}
	}
}, { immediate: true })

async function handleSubmit() {
	if (!isFormValid.value) return

	const data = {
		name: form.value.name,
		condition: form.value.condition,
		categories: form.value.categories,
		notes: form.value.notes || null,
	}

	if (editMode.value) {
		await emit('update', 'general', 'update', { id: props.item.id, ...data })
	} else {
		await emit('update', 'general', 'create', data)
	}
}
</script>

<style scoped>
.general-material-form {
	max-width: 500px;
}

.general-material-form__field {
	margin-bottom: 16px;
}

.general-material-form__field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 14px;
}

.general-material-form__condition-option {
	font-size: 14px;
}

.general-material-form__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 24px;
}
</style>
