/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import classNames from "classnames";
import React from "react";
import Inputgroup from "./Inputgroup";
import Select from "./Select";
import { useState } from "react";
import { Button } from "./Button/Button";
import { SVGSearch } from "../components/icons";
import SearchBar from "components/SearchBar";

type Props<T, H> = {
  className?: string;
  options: T[];
  hintsValues: H[];
  displayValueResolver?: (element: T) => any;
};

/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */

export default function MainSection<T, H>({
  className,
  options,
  hintsValues,
  displayValueResolver,
  ...props
}: Props<T, H>) {
  const [value, setValue] = useState(options[0]); // Category

  const [hints, setHints] = useState<any[]>([]); //Response list
  const [onSelected, setOnSelected] = useState(""); // Selected item from response list
  const [query, setQuery] = useState(""); // Query

  const onChange = (query: string) => {
    //console.log(query)
    setQuery(query);
    setHints(hintsValues);
  };
  const onClick = () => {
    console.log(displayValueResolver ? displayValueResolver(value) : value);
    console.log(onSelected);
    console.log(query);
  };
  const searchResolver = (item: any) => {
    setOnSelected(item.caption);
    console.log(onSelected);
  };
  //empty items message
  const IsEmptyItems = () => {
    return <p className="tex-blue-500">Nothing Found</p>;
  };

  return (
    <div className="bg-main bg-center bg-cover bg-origin-border bg-no-repeat h-full py-32 px-2 sm:px-6 md:px-6 lg:px-0">
      <div className="m-auto text-center font-bold text-4xl ">
        Scientific Library with Free Access
      </div>
      <div className="flex flex-row items-center justify-center space-x-3 pt-2">
        <div className=" text-2xl text-gray-400">Search</div>
        <div className=" text-3xl text-blue-500">320 455</div>
        <div className=" text-2xl text-gray-400">Items</div>
      </div>
      <div className="max-w-xl m-auto pt-16">
        <Inputgroup className="m-0 p-0">
          <div className="flex items-center w-full divide-x-2 divide-solid divide-gray-200">
            <div className="flex w-1/3">
              <Select
                inGroup={true}
                className="w-full top-0"
                options={options}
                value={value}
                onChange={setValue}
                displayValueResolver={(value: any) => value?.name ?? ""}
              />
            </div>
            <div className="w-full">
              <SearchBar
                className="w-full"
                hints={hints}
                onChange={onChange}
                onSelected={searchResolver}
                inGroup={true}
                IsEmptyItems={IsEmptyItems}
                displayValueResolver={(value: any) => value.caption}
              />
            </div>
          </div>
          <div className="pr-0.5">
            <Button onClick={onClick}>
              <Button.Icon>
                <SVGSearch className="fill-white stroke-white w-4 "></SVGSearch>
              </Button.Icon>
            </Button>
          </div>
        </Inputgroup>
        <div className="mt-7 pr-1 text-right font-semibold text-sm">
          Advanced Search
        </div>
      </div>
    </div>
  );
}