<template>
	<div class="stock-variant-row">
		<NcTextField
			:model-value="variant.label"
			:placeholder="'Größe M, Farbe Blau...'"
			:validate="variant.label !== ''"
			@update:model-value="$emit('update-variant', { ...variant, label: $event })"
		/>
		<NcTextField
			:type="'number'"
			:model-value="variant.amount"
			:validate="variant.amount >= 0"
			@update:model-value="$emit('update-variant', { ...variant, amount: Number($event) || 0 })"
		/>
		<NcTextField
			:type="'text'"
			:model-value="variant.cost"
			:placeholder="'Stückpreis (€)'"
			@update:model-value="$emit('update-variant', { ...variant, cost: $event })"
		/>
		<NcTextField
			:type="'number'"
			:model-value="variant.min_threshold"
			:validate="variant.min_threshold >= 0"
			@update:model-value="$emit('update-variant', { ...variant, min_threshold: Number($event) || 0 })"
		/>
		<NcButton type="tertiary-no-background" @click="$emit('delete-variant', variant.id)">
			<template #icon>
				<Close :size="20" />
			</template>
		</NcButton>
	</div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { NcTextField, NcButton } from '@nextcloud/vue'
import Close from 'vue-material-design-icons/Close.vue'

defineProps({
	variant: {
		type: Object,
		required: true,
	},
	stockItemId: {
		type: Number,
		required: true,
	},
})

defineEmits(['update-variant', 'delete-variant'])
</script>

<style scoped>
.stock-variant-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
</style>
