import {
	Combobox,
	ComboboxContent,
	ComboboxEmpty,
	ComboboxInput,
	ComboboxItem,
	ComboboxList,
} from "../../components/ui/combobox";
import { Label } from "../../components/ui/label";
import { useFieldContext } from ".";
import { FieldErrors } from "./Errors.Field";

// type SelectOption = {
// 	value: string;
// 	label: string;
// };

type ComboBoxFieldProps = {
	data: string[];
	label: string;
	placeholder: string;
};

export const ComboBoxField = ({
	data = [],
	label,
	placeholder = "",
}: ComboBoxFieldProps) => {
	const field = useFieldContext<string>();

	return (
		<div className="grid gap-3">
			<div className="grid gap-3">
				<Label htmlFor={field.name}>{label}</Label>
				{/* <Select
					value={field.state.value}
					onValueChange={(value) => field.handleChange(value)}
				>
					<SelectTrigger
						id={field.name}
						onBlur={field.handleBlur}
						className="w-min-2/3 w-max-fit"
					>
						<SelectValue placeholder={placeholder} />
					</SelectTrigger>
					<SelectContent position={"popper"}>
						{options.map((option) => (
							<SelectItem key={option.value} value={option.value}>
								{option.label}
							</SelectItem>
						))}
					</SelectContent>
				</Select> */}
				<Combobox
					items={data}
					//value={field.state.value ?? ""}
					// onValueChange={(value) => {
					// 	console.log(value);
					// 	field.handleChange(value);
					// }}
				>
					<ComboboxInput placeholder={placeholder} />
					{/* <ComboboxInput
						//showTrigger={false}
						placeholder={placeholder}
						onBlur={field.handleBlur}
						showClear
					/> */}
					<ComboboxContent className="max-h-72 overflow-y-auto">
						<ComboboxEmpty>No items found.</ComboboxEmpty>
						<ComboboxList>
							{(item) => (
								<ComboboxItem key={item} value={item}>
									{item}
								</ComboboxItem>
							)}
						</ComboboxList>
					</ComboboxContent>
				</Combobox>
			</div>
			<FieldErrors meta={field.state.meta} />
		</div>
	);
};
