/**
 * Copyright (c) 2017-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, {
  useState,
  useEffect,
  useContext,
  useRef,
  useCallback,
} from "react";
import classnames from "classnames";

import DocusaurusContext from "@docusaurus/context";

import "./styles.css";

const Search = (props) => {
  const [isEnabled, setIsEnabled] = useState(true);
  const searchBarRef = useRef(null);
  const context = useContext(DocusaurusContext);

  useEffect(() => {
    const { siteConfig = {} } = context;
    const {
      themeConfig: { algolia },
    } = siteConfig;

    // https://github.com/algolia/docsearch/issues/352
    const isClient = typeof window !== "undefined";
    if (isClient) {
      import("docsearch.js").then(({ default: docsearch }) => {
        docsearch({
          appId: algolia.appId,
          apiKey: algolia.apiKey,
          indexName: algolia.indexName,
          inputSelector: "#search_input_react",
          algoliaOptions: algolia.algoliaOptions,
        });
      });
    } else {
      console.warn("Search has failed to load and now is being disabled");
      setIsEnabled(false);
    }
  }, []);

  const toggleSearchIconClick = useCallback(
    (e) => {
      if (!searchBarRef.current.contains(e.target)) {
        searchBarRef.current.focus();
      }

      props.handleSearchBarToggle(!props.isSearchBarExpanded);
    },
    [props.isSearchBarExpanded]
  );

  return isEnabled ? (
    <div className="navbar__search" key="search-box">
      <span
        role="button"
        className={classnames("search-icon", {
          "search-icon-hidden": props.isSearchBarExpanded,
        })}
        onClick={toggleSearchIconClick}
        onKeyDown={toggleSearchIconClick}
        tabIndex={0}
      />
      <input
        id="search_input_react"
        type="search"
        placeholder="Search"
        aria-label="Search"
        className={classnames(
          "navbar__search-input",
          { "search-bar-expanded": props.isSearchBarExpanded },
          { "search-bar": !props.isSearchBarExpanded }
        )}
        onFocus={toggleSearchIconClick}
        onBlur={toggleSearchIconClick}
        ref={searchBarRef}
      />
    </div>
  ) : null;
};

export default Search;
