components/search/index.tsx

import { useRef, useState } from "react";
import { ChevronDownIcon, SearchIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { useClickAway, useUpdateEffect } from "react-use";

import { Dropdown } from "components/search/comps/dropdown";
import { useSearch } from "./hooks/useSearch";
import { useIntl } from "react-intl";

export const Search = ({
  search,
  setSearch,
}: {
  search: string;
  setSearch: (t: string) => void;
}) => {
  const intl = useIntl();
  const [dropdownSearch, setDropdownSearch] = useState("");
  const [dropdown, setDropdown] = useState(false);
  const [tags, setTags] = useState<string[]>([]);
  const dropdownRef = useRef(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useSearch(search, tags);
  useClickAway(dropdownRef, () => setDropdown(false));

  const handleSelect = (tag: string) => {
    if (tags.includes(tag)) {
      setTags(tags.filter((t) => t !== tag));
    } else {
      setTags([...tags, tag]);
    }
  };

  useUpdateEffect(() => {
    if (dropdown) {
      inputRef?.current?.focus();
    }
  }, [dropdown]);

  return (
    <div className="w-full mx-auto z-1 relative">
      <div className="bg-dark-600 grid grid-cols-1 lg:grid-cols-5 rounded-lg">
        <div className="flex justify-start items-center pl-4 gap-2 lg:col-span-3">
          <SearchIcon className="w-5 text-white" />
          <input
            value={search}
            type="text"
            className="w-full outline-none pr-3 py-3 bg-transparent text-white placeholder:text-dark-200 text-sm"
            placeholder={intl.formatMessage({
              id: "iconsEditor.editor.listIcons.search",
            })}
            onChange={({ target }) => setSearch(target.value)}
          />
        </div>
        <div
          ref={dropdownRef}
          className="lg:col-span-2 py-3 lg:py-0 border-t relative cursor-pointer lg:border-l border-dark-300 border-opacity-30 px-4 flex gap-2 justify-between text-sm text-dark-200 tracking-wide font-medium items-center"
          onClick={() => setDropdown(true)}
        >
          <div className="flex items-center justify-between lg:justify-start w-full lg:w-auto gap-2 whitespace-nowrap">
            {dropdown ? (
              <input
                ref={inputRef}
                value={dropdownSearch}
                placeholder={intl.formatMessage({
                  id: "iconsEditor.editor.listIcons.category",
                })}
                className="flex-1 outline-none border-none bg-transparent text-white"
                onChange={({ target }) => setDropdownSearch(target.value)}
              />
            ) : (
              <p>
                {intl.formatMessage({
                  id: "iconsEditor.editor.listIcons.category",
                })}
              </p>
            )}
            <div className="w-5 h-5 min-w-[1.25rem] bg-darkGreen font-semibold rounded-full flex justify-center items-center text-white text-xs">
              {tags.length}
            </div>
          </div>
          <ChevronDownIcon
            className={classNames(
              "w-5 min-w-[1.25rem] text-dark-100 transition-all ease-in-out duration-200",
              { "rotate-180": dropdown }
            )}
          />
          <Dropdown
            open={dropdown}
            search={dropdownSearch}
            tags={tags}
            onSelect={handleSelect}
          />
        </div>
      </div>
    </div>
  );
};