import { useState, useCallback, Fragment } from "react";
import { Combobox, Transition } from "@headlessui/react";
import { IProduct } from "./IProdutct";
import Checkbox from "components/Checkbox";
import { ReactComponent as SearchIcon } from "assets/svg/search.svg";
import classNames from "classnames";
import { useTranslation } from "react-i18next";


type Props = {
  hints: IProduct[];
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isChecked: (item: number) => boolean;
  className?: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeHolder: string;
  query: string;
};

export default function SearchFilterBar({
  hints,
  isChecked,
  handleChange,
  className,
  onChange,
  placeHolder,
  query,
}: Props): JSX.Element {
  const [checkList, setCheckList] = useState(hints);
  const [showFilters, SetShowFilters] = useState(false);
  const [t, i18next] = useTranslation()

  const ShowAllFilters = useCallback(() => {
    SetShowFilters((prev) => !prev);
  }, [SetShowFilters]);

  return (
    <>
      <Combobox value={checkList} onChange={setCheckList}>
        {({ open }) => (
          <div>
            <div
              className={classNames(
                "flex flex-row w-full items-center border border-solid rounded border-gray-200",
                className
              )}
            >
              <div className="basis-6 ">
                <Combobox.Button>
                  <div className="pl-1 pt-1.5">
                    <SearchIcon className="h-5 w-6 fill-gray-400 hover:fill-gray-400 stroke-gray-400" />
                  </div>
                </Combobox.Button>
              </div>
              <div className="grow">
                <Combobox.Input
                  onChange={onChange}
                  placeholder={placeHolder}
                  className="w-full text-sm py-1 focus:outline-none"
                />
              </div>
            </div>
            <div className="mt-4">
              <Transition
                as={Fragment}
                leave="transition ease-in duration-100"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Combobox.Options static={true}>
                  {open && (
                    <ul
                      className={classNames([
                        "w-[276px] relative h-40 top-0 right-2",
                        [
                          {
                            "max-h-60 h-60 overflow-auto": showFilters === true,
                            "max-h-40 h-40 overflow-hidden":
                              showFilters === false || hints.length <= 5,
                          },
                        ],
                      ])}
                    >
                      <li className="">
                        {hints.length >= 6 && query !== "" && (
                          <button
                            onClick={ShowAllFilters}
                            className="text-right text-blue-500 pl-2 text-sm font-medium"
                          >
                            {t("filters.showAll")}({hints.length})
                          </button>
                        )}
                      </li>
                      {hints.length > 0 ? (
                        hints.map((item) => (
                          <li key={item.id} className="mt-1 pl-2">
                            <Checkbox
                              className="z-10 mt-1 w-full max-h-56"
                              value={item.id}
                              isChecked={item.id ? isChecked(item.id) : false}
                              onChange={handleChange}
                            >
                              <p>{item.brand}</p>
                            </Checkbox>
                          </li>
                        ))
                      ) : (
                        <p className="text-blue-300 pl-2">Ничего не найдено</p>
                      )}
                    </ul>
                  )}
                </Combobox.Options>
              </Transition>
            </div>
          </div>
        )}
      </Combobox>
    </>
  );
}
