<script setup lang="ts">
import { Btn } from '@bagelink/vue'
import { 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 inputVal = $ref<string>(props.modelValue)

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

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

<style>
.colorInputPick{
    --input-font-size: 12px;
	height: calc(var(--input-height) - 9px) !important;
	background: transparent !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>
