import { tv, type VariantProps } from "tailwind-variants";

/** one row of a Select, in either rendering */
export interface SelectOption {
	value: string;
	/** `value` is still matched when filtering */
	label?: string;
	/** right-aligned secondary text, e.g. "default" on a repo's default branch. rich only:
	 *  a native `<option>` has nowhere to put it */
	hint?: string;
	/** consecutive options sharing one become a single optgroup or heading */
	group?: string;
	disabled?: boolean;
}

export type SelectAlign = "left" | "right";

/** The box both renderings draw. Layout differs — a native select needs the chevron overlaid,
 *  the rich trigger lays it out inline — so each renderer appends its own padding and display,
 *  and only the border, fill and state colours live here. */
export const selectField = tv({
	slots: {
		box: "w-full rounded-sm border bg-background-default transition-colors outline-none disabled:cursor-not-allowed",
		chevron: "shrink-0 text-foreground-subtle"
	},
	variants: {
		error: {
			false: {
				box: "border-border-default text-foreground-default focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong"
			},
			true: {
				box: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-visible:border-border-focus-danger focus-visible:ring-1 focus-visible:ring-border-focus-danger",
				chevron: "text-foreground-danger"
			}
		},
		disabled: {
			false: {},
			true: {
				box: "text-foreground-disabled",
				chevron: "text-foreground-disabled"
			}
		}
	},
	compoundVariants: [
		{
			error: true,
			disabled: true,
			class: {
				box: "border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle",
				chevron: "text-foreground-danger-subtle"
			}
		}
	],
	defaultVariants: {
		error: false,
		disabled: false
	}
});

export type SelectFieldVariants = VariantProps<typeof selectField>;