// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useId, useRef, useState, type ComponentProps } from "react";
export type TagsProps = Omit<
  ComponentProps<"div">,
  "onChange" | "defaultValue"
> & {
  label: string;
  value?: readonly string[];
  defaultValue?: readonly string[];
  onValueChange?: (tags: string[]) => void;
  suggestions?: readonly string[];
  disabled?: boolean;
  name?: string;
};
export function Tags({
  label,
  value,
  defaultValue = [],
  onValueChange,
  suggestions = [],
  disabled,
  name,
  className = "",
  ...props
}: TagsProps) {
  const id = useId();
  const ref = useRef<HTMLInputElement>(null);
  const [internal, setInternal] = useState<readonly string[]>(defaultValue);
  const [input, setInput] = useState("");
  const [notice, setNotice] = useState("");
  const current = value ?? internal;
  const update = (next: string[]) => {
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  };
  const add = () => {
    const tag = input.trim();
    if (!tag) return;
    if (current.includes(tag)) {
      setNotice("Tag already selected.");
      return;
    }
    update([...current, tag]);
    setInput("");
    setNotice(`Added ${tag}`);
  };
  return (
    <div className={`ynr-tags ${className}`} {...props}>
      <label htmlFor={id}>{label}</label>
      <div className="ynr-tags-values">
        {current.map((tag) => (
          <span key={tag}>
            {tag}
            <button
              type="button"
              disabled={disabled}
              aria-label={`Remove ${tag}`}
              onClick={() => {
                update(current.filter((t) => t !== tag));
                setNotice(`Removed ${tag}`);
                ref.current?.focus();
              }}
            >
              ×
            </button>
            {name && (
              <input
                type="hidden"
                name={name}
                value={tag}
                disabled={disabled}
              />
            )}
          </span>
        ))}
      </div>
      <div className="ynr-tags-entry">
        <input
          ref={ref}
          id={id}
          aria-label="Add tag"
          list={`${id}-suggestions`}
          disabled={disabled}
          value={input}
          onChange={(event) => setInput(event.target.value)}
          onKeyDown={(event) => {
            if (event.key === "Enter" && !event.nativeEvent.isComposing) {
              event.preventDefault();
              add();
            }
          }}
        />
        <button
          type="button"
          disabled={disabled || !input.trim()}
          onClick={add}
        >
          Add
        </button>
      </div>
      <datalist id={`${id}-suggestions`}>
        {suggestions
          .filter((tag) => !current.includes(tag))
          .map((tag) => (
            <option key={tag} value={tag} />
          ))}
      </datalist>
      <span role="status">{notice}</span>
    </div>
  );
}