import type { Component } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
import { tv, type VariantProps } from "tailwind-variants";
import type { TagVariants } from "#lib/components/ui/Tag.svelte";

export interface InputTag {
	value: string;
	label?: string;
	field?: string;
	color?: TagVariants["color"];
	icon?: Component<SvelteHTMLElements["svg"]>;
}

export type TagRejection = "duplicate" | "limit" | "invalid";

export type TagCommitKey = "enter" | "space" | "comma";

/** the character each key stands for. Typing one commits, and a pasted one splits — which is why
 *  `enter` maps to a newline: you can't type one into a single-line input, but you can paste one. */
export const TAG_COMMIT_CHARS: Record<TagCommitKey, string> = {
	enter: "\n",
	space: " ",
	comma: ","
};

export const inputField = tv({
	base: "flex items-center rounded-md bg-background-default edge-ring-inset transition-colors",
	variants: {
		size: {
			mini: "min-h-6 gap-2xs rounded-sm typography-paragraph-mini",
			small: "min-h-7 gap-1.5 rounded-sm typography-paragraph-small",
			regular: "min-h-8 gap-xs typography-paragraph-regular",
			large: "min-h-9 gap-2.5 typography-paragraph-large"
		},
		error: {
			false: "focus-within:ring-1 focus-within:ring-border-focus focus-within:inset-ring-border-focus",
			true: "bg-background-danger-subtle text-foreground-danger inset-ring-border-danger focus-within:ring-1 focus-within:ring-border-focus-danger focus-within:inset-ring-border-focus-danger"
		},
		disabled: {
			false: "",
			true: "cursor-not-allowed bg-background-inset text-foreground-disabled"
		},
		rich: {
			true: "items-center p-1",
			false: ""
		}
	},
	compoundVariants: [
		{ rich: false, size: "mini", class: "px-2xs py-3xs" },
		{ rich: false, size: "small", class: "px-1.5 py-2xs" },
		{ rich: false, size: "regular", class: "px-xs py-2xs" },
		{ rich: false, size: "large", class: "px-sm py-2xs" }
	],
	defaultVariants: {
		size: "regular",
		error: false,
		disabled: false,
		rich: false
	}
});

export type InputFieldVariants = VariantProps<typeof inputField>;