import { computed, toValue, type CSSProperties, type MaybeRefOrGetter } from 'vue'

/** Shared visual props for bagel-input field wrappers. */
export interface BagelInputShellProps {
	/** Transparent background with a border that highlights (primary color) on focus. */
	frame?: boolean
	/** Adds a simple border (border-color) without changing background or focus styles. */
	outline?: boolean
	minWidth?: string
	maxWidth?: string
	labelColor?: string
	labelActiveColor?: string
}

export function useBagelInputShell(props: MaybeRefOrGetter<BagelInputShellProps>) {
	const shellClass = computed(() => {
		const p = toValue(props)
		return {
			frame: !!p.frame,
			'bgl-outline': !!p.outline,
		}
	})

	const shellStyle = computed((): CSSProperties | undefined => {
		const p = toValue(props)
		const style: Record<string, string> = {}
		if (p.minWidth) { style.minWidth = p.minWidth }
		if (p.maxWidth) { style.maxWidth = p.maxWidth }
		if (p.labelColor) { style['--bgl-input-label-color'] = p.labelColor }
		if (p.labelActiveColor) { style['--bgl-input-label-active-color'] = p.labelActiveColor }
		return Object.keys(style).length > 0 ? style : undefined
	})

	return { shellClass, shellStyle }
}

export function mergeShellStyle(
	shellStyle: CSSProperties | undefined,
	extra?: CSSProperties | undefined,
): CSSProperties | undefined {
	if (!shellStyle && !extra) { return undefined }
	return { ...shellStyle, ...extra }
}