import { Combobox } from "@headlessui/react";
import { useState } from "react";
import { ReactComponent as SVGDropdownIcon } from "assets/svg/dropdown.svg";
import classNames from "classnames";

type OptionPropsArg = {
  selected: boolean;
  active: boolean;
  disabled: boolean;
};
type Props<T> = {
  options: T[];
  selected: T;
  setSelected: (item: T) => void;
  filterRule: (query: string, item: T) => boolean;
  displayValue: (item: T) => string;
  keyMaper: (item: T) => string;
  valueMaper?: (item: T) => any;
  itemBuilder: (props: OptionPropsArg, item: T) => React.ReactNode;
};

export default function Combox<T = any>({
  options,
  selected,
  setSelected,
  filterRule,
  displayValue,
  keyMaper,
  valueMaper,
  itemBuilder,
}: Props<T>) {
  const [query, setQuery] = useState("");

  const filtered =
    query === "" ? options : options.filter((item) => filterRule(query, item));

  return (
    <Combobox value={selected} onChange={setSelected}>
      <div className="relative">
        <div className="relative w-full text-left bg-gray-400/5 rounded-lg cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-teal-300 focus-visible:ring-offset-2 sm:text-sm overflow-hidden">
          <Combobox.Input
            className={classNames(
              "w-full rounded-lg px-4 py-2",
              "transition-colors bg-transparent text-white text-base leading-6 align-middle",
              "focus:outline-none placeholder:font-normal",
              "focus:ring-2 ring-offset-0 ring-blue-500"
            )}
            displayValue={displayValue}
            onChange={(event) => setQuery(event.target.value)}
          />
          <Combobox.Button className="absolute inset-y-0 right-0 p-2.5 flex items-center w-10 hover:bg-blue-500
           border-l-2 border-blue-900/50 transition-colors">
            <SVGDropdownIcon
              className="w-full h-full fill-white"
              aria-hidden="true"
            />
          </Combobox.Button>
        </div>
          <Combobox.Options
            className="absolute w-full mt-1 overflow-auto py-2 px-4 sm:py-3
          text-base bg-serv-500 rounded-lg shadow-xl shadow-black/30 max-h-60
          ring-blue-500 ring-opacity-20 focus:outline-none sm:text-sm border border-blue-900/50"
          >
            {filtered.length === 0 && query !== "" ? (
              <div className="cursor-default select-none relative py-2 px-4 text-gray-700">
                Nothing found.
              </div>
            ) : (
              filtered.map((option) => (
                <Combobox.Option
                  key={keyMaper(option)}
                  className={({ active }) => classNames(
                    "p-2 py-4 space-x-5",
                    "rounded-md hover:bg-gray-300/5 transition-colors cursor-pointer",
                    { "bg-gray-300/5": active }
                  )
                  }
                  value={valueMaper ? valueMaper(option) : option}
                >
                  {(stats) => itemBuilder(stats, option)}
                </Combobox.Option>
              ))
            )}
          </Combobox.Options>
      </div>
    </Combobox>
  );
}
