import {
  type FieldItemProps,
  type FormSelectProps,
} from "@/components/tanstack-form-utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { type ReactNode, useState } from "react";

function getDefaultValue<T>(value: T): string {
  return String((value as any).value ?? value);
}

function getDefaultLabel<T>(value: T): ReactNode {
  return (value as any).label ?? String(value);
}

export function BasicSelect<R>({
  options,
  getLabel = getDefaultLabel<R>,
  getValue = getDefaultValue<R>,
  disabled,
  value,
  onValueChange,
  onOpenChange,
  className,
  placeholder,
  ...props
}: FieldItemProps &
  FormSelectProps & {
    placeholder?: string;
    options?: R[];
    getValue?: (r: R) => string;
    getLabel?: (r: R) => ReactNode;
  }) {
  const [open, setOpen] = useState(false);
  return (
    <Select
      open={open}
      value={value}
      onValueChange={onValueChange}
      onOpenChange={(open) => {
        setOpen(open);
        onOpenChange?.(open);
      }}
    >
      <SelectTrigger {...props} className={className} disabled={disabled}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        {options?.map((value) => (
          <SelectItem key={getValue(value)} value={getValue(value)}>
            {getLabel(value)}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}