import { Input } from "@/components/ui/input";
import Chip from "@/pages/rules/components/exclusions/Chip";
import { useDebounced } from "@/pages/rules/components/exclusions/useDebounced";
import { useGetProductsQuery } from "@/store/api/lookupApi";
import { __ } from "@wordpress/i18n";
import { useState } from "react";

const D = "product-comparison-for-woocommerce";

/**
 * Pick up to `max` products: chips for the picked ones, a search (2+
 * letters) for more. `value` is `[{ id, name }]`.
 */
const ProductPicker = ({ id, value, onChange, max }) => {
  const [term, setTerm] = useState("");
  const search = useDebounced(term.trim());
  const { data: found = [] } = useGetProductsQuery(
    { search },
    { skip: search.length < 2 },
  );
  const full = value.length >= max;
  const results = search.length < 2 || full ? [] : found;

  return (
    <div className="ino:flex ino:flex-col ino:gap-2">
      {value.length > 0 && (
        <div className="ino:flex ino:flex-wrap ino:gap-2">
          {value.map((product) => (
            <Chip
              key={product.id}
              label={product.name}
              onRemove={() =>
                onChange(value.filter((p) => p.id !== product.id))
              }
            />
          ))}
        </div>
      )}
      <Input
        id={id}
        type="search"
        value={term}
        disabled={full}
        placeholder={__("Search products…", D)}
        onChange={(event) => setTerm(event.target.value)}
      />
      {results.length > 0 && (
        <ul className="ino:m-0 ino:list-none ino:rounded-md ino:border ino:border-border ino:p-1">
          {results.map((product) => (
            <li key={product.id}>
              <button
                type="button"
                disabled={value.some((p) => p.id === product.id)}
                onClick={() => {
                  onChange([...value, product]);
                  setTerm("");
                }}
                className="ino:w-full ino:cursor-pointer 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}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ProductPicker;