import { Input } from "@/components/ui/input";
import { useSetting } from "@/hooks/useSettings";
import { useGetProductsQuery } from "@/store/api/lookupApi";
import { __ } from "@wordpress/i18n";
import { Plus } from "lucide-react";
import { useState } from "react";
import Chip from "./Chip";
import { CHIP_ROW, PICKER_LABEL } from "./classes";
import { useDebounced } from "./useDebounced";

/**
 * Exclusions › Products: picked ones as chips, plus a search (2+ letters)
 * whose results can be added.
 */
const ProductExclusions = ({ locked }) => {
  const [picked = [], setPicked] = useSetting("exclusions.products", []);
  const [term, setTerm] = useState("");
  const search = useDebounced(term.trim());
  const { data: saved = [] } = useGetProductsQuery(
    { include: picked },
    { skip: !picked.length },
  );
  const { data: found = [], isFetching } = useGetProductsQuery(
    { search },
    { skip: search.length < 2 },
  );
  const names = Object.fromEntries(saved.map((p) => [p.id, p.name]));
  const results = search.length < 2 ? [] : found;

  return (
    <div className="ino:mt-[18px] ino:pb-5">
      <label htmlFor="pcfw-ex-products" className={PICKER_LABEL}>
        {__("Products", "product-comparison-for-woocommerce")}
      </label>
      {picked.length > 0 && (
        <div className={CHIP_ROW}>
          {picked.map((id) => (
            <Chip
              key={id}
              label={names[id] ?? `#${id}`}
              disabled={locked}
              onRemove={() => setPicked(picked.filter((x) => x !== id))}
            />
          ))}
        </div>
      )}
      <Input
        id="pcfw-ex-products"
        type="search"
        value={term}
        disabled={locked}
        placeholder={__(
          "Search products to exclude",
          "product-comparison-for-woocommerce",
        )}
        onChange={(event) => setTerm(event.target.value)}
        className="ino:mt-2"
      />
      {results.length > 0 && (
        <ul className="ino:m-0 ino:mt-2 ino:list-none ino:rounded-md ino:border ino:border-border ino:p-1">
          {results.map((product) => {
            const added = picked.includes(product.id);

            return (
              <li key={product.id}>
                <button
                  type="button"
                  disabled={locked || added}
                  onClick={() => setPicked([...picked, product.id])}
                  className="ino:flex ino:w-full ino:cursor-pointer ino:items-center ino:justify-between ino:gap-2 ino:rounded ino:border-0 ino:bg-transparent ino:px-2 ino:py-1.5 ino:text-left ino:text-sm ino:hover:bg-muted ino:focus-visible:outline-2 ino:focus-visible:outline-ring ino:disabled:cursor-default ino:disabled:text-muted-foreground"
                >
                  {product.name}
                  {added ? (
                    __("Excluded", "product-comparison-for-woocommerce")
                  ) : (
                    <Plus className="ino:size-4" aria-hidden="true" />
                  )}
                </button>
              </li>
            );
          })}
        </ul>
      )}
      {search.length >= 2 && !isFetching && !results.length && (
        <p className="ino:mt-2 ino:text-sm ino:text-muted-foreground">
          {__("No products found.", "product-comparison-for-woocommerce")}
        </p>
      )}
    </div>
  );
};

export default ProductExclusions;