王明 / Food-Labeling-Management-Platform

  "use client";
  
  import * as React from "react";
  import { useMemo, useState } from "react";
  import { ChevronsUpDown, Search } from "lucide-react";
  import { cn } from "./utils";
  import { Button } from "./button";
  import { Checkbox } from "./checkbox";
  import { Input } from "./input";
  import { Popover, PopoverContent, PopoverTrigger } from "./popover";
  import type { SearchableSelectOption } from "./searchable-select";
  
  export type { SearchableSelectOption };
  
  function dedupeIds(ids: string[]): string[] {
    const seen = new Set<string>();
    const out: string[] = [];
    for (const id of ids) {
      const t = id.trim();
      if (!t || seen.has(t)) continue;
      seen.add(t);
      out.push(t);
    }
    return out;
  }
  
  export function SearchableMultiSelect({
    values,
    onValuesChange,
    options,
    placeholder = "Select…",
    searchPlaceholder = "Search…",
    emptyText = "No matching results.",
    disabled,
    className,

    /** 顶栏/模板编辑器等紧凑行：与 SearchableSelect h-7、text-xs 对齐 */
    compact = false,

    /** 在列表顶部增加一行「全选」：针对当前搜索结果对应的选项值全选 / 清除 */
    selectAllRowLabel,

  }: {
    values: string[];
    onValuesChange: (next: string[]) => void;
    options: SearchableSelectOption[];
    placeholder?: string;
    searchPlaceholder?: string;
    emptyText?: string;
    disabled?: boolean;
    className?: string;

    compact?: boolean;

    selectAllRowLabel?: string;

  }) {
    const [open, setOpen] = useState(false);
    const [q, setQ] = useState("");
    const normalized = useMemo(() => dedupeIds(values), [values]);
  
    const filtered = useMemo(() => {
      const s = q.trim().toLowerCase();
      if (!s) return options;
      return options.filter(
        (o) =>
          o.label.toLowerCase().includes(s) || o.value.toLowerCase().includes(s),
      );
    }, [options, q]);
  

    const filteredValues = useMemo(() => filtered.map((o) => o.value).filter(Boolean), [filtered]);
  
    const allFilteredSelected =
      filteredValues.length > 0 && filteredValues.every((v) => normalized.includes(v));
    const someFilteredSelected = filteredValues.some((v) => normalized.includes(v));
  

    const labelByValue = useMemo(() => {
      const m = new Map<string, string>();
      for (const o of options) m.set(o.value, o.label);
      return m;
    }, [options]);
  
    const summary = useMemo(() => {
      if (normalized.length === 0) return null;
      if (normalized.length === 1) {
        return labelByValue.get(normalized[0]) ?? normalized[0];
      }
      const first = labelByValue.get(normalized[0]) ?? normalized[0];
      const second = labelByValue.get(normalized[1]) ?? normalized[1];
      if (normalized.length === 2) return `${first}, ${second}`;
      return `${first}, ${second} +${normalized.length - 2}`;
    }, [normalized, labelByValue]);
  
    const toggle = (id: string) => {
      const t = id.trim();
      if (!t) return;
      if (normalized.includes(t)) {
        onValuesChange(normalized.filter((x) => x !== t));
      } else {
        onValuesChange([...normalized, t]);
      }
    };
  

    const toggleSelectAllFiltered = () => {
      if (filteredValues.length === 0) return;
      if (allFilteredSelected) {
        onValuesChange(normalized.filter((x) => !filteredValues.includes(x)));
      } else {
        onValuesChange(dedupeIds([...normalized, ...filteredValues]));
      }
    };
  

    return (
      <Popover
        open={open}
        onOpenChange={(o) => {
          setOpen(o);
          if (!o) setQ("");
        }}
      >
        <PopoverTrigger asChild>
          <Button
            type="button"
            variant="outline"
            role="combobox"
            aria-expanded={open}
            disabled={disabled}
            className={cn(

              compact
                ? "w-full justify-between overflow-hidden border border-gray-300 bg-white font-normal shadow-none hover:bg-white"
                : "h-auto min-h-10 w-full justify-between overflow-hidden px-3 py-2 font-normal border border-gray-300 bg-white",

              className,
            )}
          >
            <span
              className={cn(

                "min-w-0 flex-1 truncate text-left",
                compact ? "text-xs leading-tight" : "text-sm",

                !summary && "text-gray-500",
              )}

              title={summary ?? placeholder}

            >
              {summary ?? placeholder}
            </span>

            <ChevronsUpDown
              className={cn(
                "ml-2 shrink-0 self-center opacity-50",
                compact ? "h-3 w-3" : "h-4 w-4",
              )}
            />

          </Button>
        </PopoverTrigger>
        <PopoverContent
          className="w-[var(--radix-popover-trigger-width)] max-w-[min(100vw-2rem,400px)] p-0"
          align="start"
        >
          <div className="flex items-center gap-2 border-b border-gray-100 px-2 py-2">
            <Search className="h-4 w-4 shrink-0 text-gray-400" />
            <Input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder={searchPlaceholder}
              className="h-8 border-0 bg-transparent px-0 text-sm shadow-none focus-visible:ring-0"
            />
          </div>
          <div className="max-h-[min(240px,50vh)] overflow-y-auto p-1">
            {filtered.length === 0 ? (
              <div className="px-2 py-6 text-center text-sm text-gray-500">{emptyText}</div>
            ) : (

              <>
                {selectAllRowLabel ? (
                  <label className="flex cursor-pointer items-center gap-2 rounded-md border-b border-gray-100 px-2 py-2 text-sm font-medium hover:bg-gray-100">
                    <Checkbox
                      checked={
                        allFilteredSelected ? true : someFilteredSelected ? "indeterminate" : false
                      }
                      onCheckedChange={() => toggleSelectAllFiltered()}
                      onClick={(e) => e.stopPropagation()}
                    />
                    <span className="min-w-0 flex-1 truncate">{selectAllRowLabel}</span>
                  </label>
                ) : null}
                {filtered.map((opt) => (
                  <label
                    key={opt.value}
                    className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm hover:bg-gray-100"
                  >
                    <Checkbox
                      checked={normalized.includes(opt.value)}
                      onCheckedChange={() => toggle(opt.value)}
                      onClick={(e) => e.stopPropagation()}
                    />
                    <span className="min-w-0 flex-1 truncate">{opt.label}</span>
                  </label>
                ))}
              </>

            )}
          </div>
          {normalized.length > 0 ? (
            <div className="border-t border-gray-100 px-2 py-1.5">
              <button
                type="button"
                className="text-xs text-gray-500 underline-offset-2 hover:text-gray-900 hover:underline"
                onClick={() => {
                  onValuesChange([]);
                  setQ("");
                }}
              >
                Clear all ({normalized.length})
              </button>
            </div>
          ) : null}
        </PopoverContent>
      </Popover>
    );
  }