homepage/src/components/widgets/search/search.jsx

import { useState, useEffect, useCallback, Fragment } from "react";
import { useTranslation } from "next-i18next";
import { FiSearch } from "react-icons/fi";
import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
import { Listbox, Transition } from "@headlessui/react";
import classNames from "classnames";

import ContainerForm from "../widget/container_form";
import Raw from "../widget/raw";

export const searchProviders = {
  google: {
    name: "Google",
    url: "https://www.google.com/search?q=",
    icon: SiGoogle,
  },
  duckduckgo: {
    name: "DuckDuckGo",
    url: "https://duckduckgo.com/?q=",
    icon: SiDuckduckgo,
  },
  bing: {
    name: "Bing",
    url: "https://www.bing.com/search?q=",
    icon: SiMicrosoftbing,
  },
  baidu: {
    name: "Baidu",
    url: "https://www.baidu.com/s?wd=",
    icon: SiBaidu,
  },
  brave: {
    name: "Brave",
    url: "https://search.brave.com/search?q=",
    icon: SiBrave,
  },
  custom: {
    name: "Custom",
    url: false,
    icon: FiSearch,
  },
};

function getAvailableProviderIds(options) {
  if (options.provider && Array.isArray(options.provider)) {
    return Object.keys(searchProviders).filter((value) => options.provider.includes(value));
  }
  if (options.provider && searchProviders[options.provider]) {
    return [options.provider];
  }
  return null;
}

const localStorageKey = "search-name";

export function getStoredProvider() {
  if (typeof window !== "undefined") {
    const storedName = localStorage.getItem(localStorageKey);
    if (storedName) {
      return Object.values(searchProviders).find((el) => el.name === storedName);
    }
  }
  return null;
}

export default function Search({ options }) {
  const { t } = useTranslation();

  const availableProviderIds = getAvailableProviderIds(options);

  const [query, setQuery] = useState("");
  const [selectedProvider, setSelectedProvider] = useState(
    searchProviders[availableProviderIds[0] ?? searchProviders.google],
  );

  useEffect(() => {
    const storedProvider = getStoredProvider();
    let storedProviderKey = null;
    storedProviderKey = Object.keys(searchProviders).find((pkey) => searchProviders[pkey] === storedProvider);
    if (storedProvider && availableProviderIds.includes(storedProviderKey)) {
      setSelectedProvider(storedProvider);
    }
  }, [availableProviderIds]);

  const submitCallback = useCallback(
    (event) => {
      const q = encodeURIComponent(query);
      const { url } = selectedProvider;
      if (url) {
        window.open(`${url}${q}`, options.target || "_blank");
      } else {
        window.open(`${options.url}${q}`, options.target || "_blank");
      }

      event.preventDefault();
      event.target.reset();
      setQuery("");
    },
    [options.target, options.url, query, selectedProvider],
  );

  if (!availableProviderIds) {
    return null;
  }

  const onChangeProvider = (provider) => {
    setSelectedProvider(provider);
    localStorage.setItem(localStorageKey, provider.name);
  };

  return (
    <ContainerForm options={options} callback={submitCallback} additionalClassNames="grow information-widget-search">
      <Raw>
        <div className="flex-col relative h-8 my-4 min-w-fit">
          <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
          <input
            type="text"
            className="
            overflow-hidden w-full h-full rounded-md
            text-xs text-theme-900 dark:text-white
            placeholder-theme-900 dark:placeholder-white/80
            bg-white/50 dark:bg-white/10
            focus:ring-theme-500 dark:focus:ring-white/50
            focus:border-theme-500 dark:focus:border-white/50
            border border-theme-300 dark:border-theme-200/50"
            placeholder={t("search.placeholder")}
            onChange={(s) => setQuery(s.currentTarget.value)}
            required
            autoCapitalize="off"
            autoCorrect="off"
            autoComplete="off"
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={options.focus}
          />
          <Listbox
            as="div"
            value={selectedProvider}
            onChange={onChangeProvider}
            className="relative text-left"
            disabled={availableProviderIds?.length === 1}
          >
            <div>
              <Listbox.Button
                className="
          absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
          text-white font-medium text-sm
          bg-theme-600/40 dark:bg-white/10
          focus:ring-theme-500 dark:focus:ring-white/50"
              >
                <selectedProvider.icon className="text-white w-3 h-3" />
                <span className="sr-only">{t("search.search")}</span>
              </Listbox.Button>
            </div>
            <Transition
              as={Fragment}
              enter="transition ease-out duration-100"
              enterFrom="transform opacity-0 scale-95"
              enterTo="transform opacity-100 scale-100"
              leave="transition ease-in duration-75"
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
              <Listbox.Options
                className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
              bg-theme-100 dark:bg-theme-600 shadow-lg
              ring-1 ring-black ring-opacity-5 focus:outline-none"
              >
                <div className="flex flex-col">
                  {availableProviderIds.map((providerId) => {
                    const p = searchProviders[providerId];
                    return (
                      <Listbox.Option key={providerId} value={p} as={Fragment}>
                        {({ active }) => (
                          <li
                            className={classNames(
                              "rounded-md cursor-pointer",
                              active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100",
                            )}
                          >
                            <p.icon className="h-4 w-4 mx-4 my-2" />
                          </li>
                        )}
                      </Listbox.Option>
                    );
                  })}
                </div>
              </Listbox.Options>
            </Transition>
          </Listbox>
        </div>
      </Raw>
    </ContainerForm>
  );
}