import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useState } from "react";

export const MultiSelect = ({
  disabled = false,
  getTriggerText = (selected) =>
    selected.length > 0 ? `${selected.length} selected` : `Select...`,
  onCreateNew,
  onSelectionChange,
  options,
  searchPlaceholder,
  selected,
}: {
  disabled?: boolean;
  getTriggerText?: (selected: string[]) => string;
  onCreateNew?: (value: string) => void;
  onSelectionChange: (value: string) => void;
  options: { label: string; value: string; disabled?: boolean }[];
  searchPlaceholder?: string;
  selected: string[];
}) => {
  const [search, setSearch] = useState("");
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="secondary"
          className="w-full justify-start font-normal"
          disabled={disabled}
        >
          <span className="truncate">{getTriggerText(selected)}</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-(--radix-popover-trigger-width) p-0"
        align="start"
      >
        <Command>
          <CommandInput
            placeholder={searchPlaceholder}
            onValueChange={(value) => {
              setSearch(value);
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter" && search && onCreateNew) {
                onCreateNew(search);
                onSelectionChange(search);
                setSearch("");
              }
            }}
            value={search}
          />
          <CommandList>
            <CommandEmpty className="overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground">
              {search && onCreateNew ? (
                <span
                  className="relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden bg-component-secondary text-secondary-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
                  key={search}
                  onClick={() => {
                    onCreateNew(search);
                    onSelectionChange(search);
                    setSearch("");
                  }}
                  data-selected
                >
                  <Checkbox className="mr-2" />
                  <span>{search}</span>
                </span>
              ) : (
                "No results found."
              )}
            </CommandEmpty>
            <CommandGroup>
              {options.map(({ label, value, disabled }, index) => (
                <CommandItem
                  key={`tool_option_${value}_${index}`}
                  onSelect={() => onSelectionChange(value)}
                  disabled={disabled}
                >
                  <Checkbox
                    className="mr-2"
                    checked={selected.includes(value)}
                  />
                  <span>{label}</span>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};
