<script setup lang="ts">
import { Btn, useI18n, resolveI18n } from '@bagelink/vue'
import { ref, watch } from 'vue'

const props = withDefaults(
	defineProps<{
		label?: string
		id?: string
		placeholder?: string
		modelValue: any
		editMode?: boolean
		small?: boolean
		required?: boolean
		nativeInputAttrs?: { [key: string]: any }
	}>(),
	{
		editMode: true,
	},
)

const emits = defineEmits(['update:modelValue'])

const { $t } = useI18n()

const inputVal = ref<string>(props.modelValue)

watch(
	() => inputVal.value,
	(newVal) => { emits('update:modelValue', newVal) },
)
</script>

<template>
	<div class="bagel-input testMe1 " :class="{ small }" :title="label">
		<label>
			{{ resolveI18n(label) }}
			<div class="flex rounded colorInputPickWrap" :class="{ 'px-025 bg-input': !small }">
				<input
					:id="id" v-model="inputVal" class="border" type="color" :placeholder="resolveI18n(placeholder) || resolveI18n(label)"
					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required"
					v-bind="nativeInputAttrs"
				>
				<input
					v-if="!small" v-model="inputVal" class="flex-grow-1 border colorInputPick" type="text"
					:placeholder="$t('color.placeholder')"
				>
				<Btn
					:class="{ 'not-allowed opacity-3': !inputVal }" round flat thin icon="clear"
					@click="inputVal = ''"
				/>
			</div>
		</label>
	</div>
</template>

<style>
.colorInputPick {
	--input-font-size: 12px;
	background: transparent !important;
	height: var(--input-height) !important;
	min-width: 50px !important;
}

.colorInputPick:focus {
	outline: none;
	box-shadow: none !important;
}

.colorInputPickWrap:focus-within {
	box-shadow: inset 0 0 10px #00000021;
	outline-color: var(--input-bg);
}
</style>
