<script setup lang="ts">
import { ref, defineProps, computed } from "vue";

const props = defineProps({
	modelValue: {
		type: [String,Boolean,Number],
		default: null,
	},
	nullable: {
		type: Boolean,
		default: false,
	},
	inputtype: {
		type: String,
		default: "text",
		required: false
	}
});

const firstValue = props.modelValue;

const isNull = ref(firstValue == null);

const emit = defineEmits(["update:modelValue", "isNull"]);

const value = computed({
	get: () => props.modelValue,
	set: (v) => {
		emit("update:modelValue", v);
	},
});

if(value.value==null && props.nullable==false){ 
		isNull.value=false; 
		value.value="";
}

const editing = ref(false);
</script>
<template>
	<form v-if="editing" @submit.prevent="editing = false">
		<input
			:type="props.inputtype"
			:placeholder="firstValue"
			v-model="value"
			v-if="!isNull"
		/>
		<label for="nullCheckbox" v-if="nullable">Null: </label>
		<input
			id="nullCheckbox"
			type="checkbox"
			v-if="nullable"
			@change="value=isNull?null:value"
			v-model="isNull"
		/>
		<input type="submit" value="Speichern" />
	</form>
	<i v-else-if="value=='' && !isNull && props.inputtype!='checkbox'" @dblclick="editing=true">EMPTY</i>
	<p v-else-if="!isNull" @dblclick="editing = true">{{ value }}</p>
	<i v-else @dblclick="editing = true">NULL</i>
</template>
<style lang="scss" scoped>

</style>
