/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import Searchbar from "components/Searchbar/Searchbar";
import React, { useState } from "react";
import { Scrollbars } from "react-custom-scrollbars";

const hintsValues = [
  { id: "1", caption: "Wade Cooper" },
  { id: "2", caption: "Arlene Mccoy" },
  { id: "3", caption: "Devon Webb" },
  { id: "4", caption: "Tom Cook" },
  { id: "5", caption: "Tanya Fox" },
  { id: "6", caption: "Hellen Schmidt" },
];

const hintsValues2 = [
  { id: "1", caption: "Wade Cooper2" },
  { id: "2", caption: "Arlene Mccoy2" },
  { id: "3", caption: "Devon Webb2" },
  { id: "4", caption: "Tom Cook2" },
  { id: "5", caption: "Tanya Fox2" },
  { id: "6", caption: "Hellen Schmidt2" },
];

/* -------------------------------------------------------------------------- */
/*                         Application root component                         */
/* -------------------------------------------------------------------------- */
/**
 * Application root component
 * @return {JSX.Element}
 */
function App() {
  return <Page />;
}

function Page() {
  const [hints, setHints] = useState<any[]>([]);
  function delayedMock(hints: any[]): Promise<any> {
    return new Promise((resolve) => setTimeout(() => resolve(hints), 2000));
  }

  const onChange = async (query: string) => {
    console.log(query);
    if (query === "ok") {
      await delayedMock(hintsValues2).then((v) => setHints(v));
      return;
    }
    console.log("touched");
    await delayedMock([]).then((v) => setHints(v));
  };
  return (
    <>
      <Searchbar hints={hints} onChange={onChange} onSelected={console.log} />
    </>
  );
}

export default App;