<script setup>
import {ref} from "vue";
import TTextarea from "@/components/ui/TTextarea.vue";

const props = defineProps(["value"])
const emits = defineEmits(["update:modelValue"])

const {realValue} = (function () {
	let value = props.value
	if (typeof value != "string") {
		value = ""
	}
	return {
		realValue: ref(value)
	}
})()

const textarea = ref()

const dragover = function () {
}

const drop = function (e) {
	e.dataTransfer.items[0].getAsFile().text().then(function (data) {
		setValue(data)
	})
}
const setValue = function (value) {
	realValue.value = value
	emits("update:modelValue", value)
}

defineExpose({
	focus() {
		textarea.value.$el.focus()
	}
})


</script>

<template>
	<TTextarea @drop.prevent="drop" @dragover.prevent="dragover" ref="textarea" v-model="realValue" v-bind="$attrs"></TTextarea>
</template>

<style scoped>

</style>