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

export const ListboxRootPropsSchema = z.object({
  value: z.union([z.string(), z.array(z.string())]).optional().describe("Controlled selected value or values"),
  defaultValue: z.union([z.string(), z.array(z.string())]).optional().describe("Initial selected value or values (uncontrolled)"),
  multiple: z.boolean().optional().describe("Whether multiple items can be selected"),
  disabled: z.boolean().optional().describe("Whether the listbox is disabled"),
  orientation: z.enum(["horizontal", "vertical"]).optional().describe("Navigation orientation. Defaults to vertical"),
});

export interface ListboxRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
  items: string[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  selectionMode?: "single" | "multiple";
  values?: string[];
  defaultValues?: string[];
  onValuesChange?: (values: string[]) => void;
  orientation?: "vertical" | "horizontal";
  loop?: boolean;
  getLabel?: (value: string) => string;
  disabled?: boolean;
  children: JSX.Element;
}

export const ListboxItemPropsSchema = z.object({
  value: z.string().describe("The value this item represents"),
  disabled: z.boolean().optional().describe("Whether this item is disabled"),
});

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

export const ListboxMeta: ComponentMeta = {
  name: "Listbox",
  description: "Inline list of selectable options with keyboard navigation, not in a dropdown",
  parts: ["Root", "Item", "ItemLabel", "ItemIndicator", "Group", "GroupLabel"] as const,
  requiredParts: ["Root", "Item"] as const,
} as const;
