<script setup lang="ts">
import { Btn, useI18n, resolveI18n } from '@bagelink/vue'
import { computed, ref, watch } from 'vue'
import type { BagelInputShellProps } from './bagelInputShell'
import { useBagelInputShell } from './bagelInputShell'
 
const props = withDefaults(
	defineProps<{
		label?: string
		id?: string
		placeholder?: string
		modelValue: any
		editMode?: boolean
		small?: boolean
		required?: boolean
		nativeInputAttrs?: { [key: string]: any }
	underlined?: boolean
	} & BagelInputShellProps>(),
	{
		editMode: true,
	},
)

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

const { shellClass, shellStyle } = useBagelInputShell(props)
const hasValue = computed(() => Boolean(inputVal.value))

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="[shellClass, { small, underlined, 'has-value': hasValue }]" :style="shellStyle"
		:title="label"
	>
		<label>
			{{ resolveI18n(label) }}
			<div
				class="flex rounded colorInputPickWrap"
				:class="{
					'px-025 bg-input': !small && !frame && !underlined,
					'px-025': !small && (frame || underlined),
				}"
			>
				<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 {
--bgl-input-font-size: 12px;
background: transparent !important;
height: var(--bgl-input-height) !important;
min-width: 50px !important;
outline: none !important;
}

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

.bagel-input:not(.frame):not(.bgl-outline):not(.underlined) .colorInputPickWrap:focus-within {
box-shadow: inset 0 0 10px #00000021;
}

/* ── frame: transparent bg, outline that highlights on focus ── */
.bagel-input.frame .colorInputPickWrap {
background: transparent !important;
outline: 1.5px solid var(--bgl-border-color);
outline-offset: -1px;
transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}
.bagel-input.frame .colorInputPickWrap:focus-within {
outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
}

/* ── bgl-outline: border only ── */
.bagel-input.bgl-outline .colorInputPickWrap {
outline: 1.5px solid var(--bgl-border-color);
outline-offset: -1px;
}

/* ── underlined: suppress global border-bottom on inner inputs ── */
.bagel-input.underlined .colorInputPickWrap input {
border-bottom: none !important;
border-radius: 0 !important;
padding-inline: 0.25rem !important;
}

/* ── underlined: bottom border only on the wrap itself ── */
.bagel-input.underlined .colorInputPickWrap {
background: transparent !important;
border-radius: 0 !important;
outline: none !important;
border-bottom: 1.5px solid var(--bgl-border-color);
transition: border-color 0.25s ease;
position: relative;
}

/* animated fill line — matches the global underlined ::after pattern */
.bagel-input.underlined .colorInputPickWrap::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-start: 0;
width: 0;
height: 2px;
background: var(--bgl-input-label-active-color, var(--bgl-primary));
transition: width 0.6s ease;
pointer-events: none;
}

.bagel-input.underlined .colorInputPickWrap:focus-within::after {
width: 100%;
}

</style>
