<script setup lang="ts">
// const props =
import { computed } from 'vue'
import { resolveI18n } from '@bagelink/vue'
import type { BagelInputShellProps } from './bagelInputShell'
import { useBagelInputShell } from './bagelInputShell'

const props = withDefaults(
	defineProps<{
		description?: string
		label?: string
		modelValue: any
		placeholder?: string
		editMode?: boolean
		small?: boolean
	} & BagelInputShellProps>(),
	{
		description: '',
		editMode: true,
		placeholder: '',
		label: '',
	},
)

const { shellClass, shellStyle } = useBagelInputShell(props)
const hasValue = computed(() => props.modelValue != null && String(props.modelValue).length > 0)

const emits = defineEmits(['update:modelValue'])
function handleInput(e: Event) {
	const el = e.target as HTMLInputElement
	emits('update:modelValue', el.value)
}
</script>

<template>
	<div
		class="bagel-input" :title="description"
		:class="[shellClass, { small, 'has-value': hasValue }]" :style="shellStyle"
	>
		<label v-if="label">
			<LangText :input="label" />
		</label>
		<textarea
			:value="modelValue" :class="{ 'no-edit': !editMode }" :placeholder="resolveI18n(placeholder)"
			@input="handleInput"
		/>
	</div>
</template>

<style scoped>

.bagel-input textarea {
font-family: monospace;
}

[dir='rtl'] .bagel-input textarea {
direction: ltr;
}

</style>
