import { z } from "zod/v4";
import type { JSX } from "solid-js";
import type { ComponentMeta } from "../../meta";

export const ComboboxRootPropsSchema = z.object({
  value: z.string().optional().describe("Controlled selected value"),
  defaultValue: z.string().optional().describe("Initial selected value (uncontrolled)"),
  inputValue: z.string().optional().describe("Controlled input text value"),
  name: z.string().optional().describe("Form field name"),
  placeholder: z.string().optional().describe("Placeholder text shown in the input when empty"),
  disabled: z.boolean().optional().describe("Whether the combobox is disabled"),
  required: z.boolean().optional().describe("Whether selection is required"),
  allowCustomValue: z.boolean().optional().describe("Allow selecting a value not in the items list"),
});

export interface ComboboxRootProps extends z.infer<typeof ComboboxRootPropsSchema> {
  items: string[];
  onValueChange?: (value: string) => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  onInputChange?: (value: string) => void;
  getLabel?: (value: string) => string;
  children: JSX.Element;
}

export const ComboboxItemPropsSchema = z.object({
  value: z.string().describe("The value this item represents"),
  disabled: z.boolean().optional().describe("Whether this item is disabled"),
  textValue: z.string().optional().describe("Accessible text used for typeahead matching"),
});

export interface ComboboxItemProps extends z.infer<typeof ComboboxItemPropsSchema>, JSX.HTMLAttributes<HTMLDivElement> {
  children?: JSX.Element;
}

export const ComboboxMeta: ComponentMeta = {
  name: "Combobox",
  description: "Searchable select that filters options as the user types, with keyboard navigation",
  parts: ["Root", "Input", "Trigger", "Portal", "Content", "Listbox", "Item", "ItemLabel", "ItemIndicator", "Group", "GroupLabel"] as const,
  requiredParts: ["Root", "Input", "Content", "Item"] as const,
} as const;