import React, { Fragment } from "react";
import { Combobox, Menu, Transition } from "@headlessui/react";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
import classNames from "../../../utils/helpers/className";
import ComboBox from "../../navbar/comboBox";
import SearchIcon from "../../../utils/icons/searchIcon";
import { UserProfile } from "../../../types/notifications";

const SmallSearchButton = ({
  mobile,
  search,
  profile,
  props,
  smallSearch,
}: {
  smallSearch?: boolean;
  props: {
    handleClick: (e: any) => void;
    searchTab: boolean;
    opened: boolean;
    setSearchTab: (e: any) => void;
  };
  profile?: UserProfile;
  mobile: boolean;
  search: boolean;
}) => {
  if (!profile) {
    return <div></div>;
  }
  return (
    <Menu>
      {({ open, close }) => (
        <>
          <div className={classNames(open ? "" : "", "relative flex")}>
            <Menu.Button>
              {mobile ? (
                <SearchIcon mobile={mobile} search={search} />
              ) : smallSearch ? (
                <SearchIcon mobile={false} search={false} />
              ) : (
                <div className=" flex w-[100%] flex-col items-center justify-center rounded-r-md bg-[#53535f61] px-0 py-1">
                  <TooltipBottom
                    text={<SearchIcon mobile={mobile} search={search} />}
                    tip={"Search"}
                    opened={open}
                  />
                </div>
              )}
            </Menu.Button>
          </div>
          {open && (
            <div
              className={classNames(
                mobile
                  ? "absolute z-[20] w-[12.23rem] translate-y-[6.25rem]  translate-x-[5.50rem] rounded-md bg-[#1f1f23] shadow-lg"
                  : "translate-y-[2.5rem] -translate-x-[2.5rem] rounded-md",
                "absolute bg-[#1f1f23]"
              )}
            >
              <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"
              >
                <Menu.Items
                  className="relative flex flex-col shadow-lg  focus:outline-none"
                  as="div"
                  //onClick={handleClick}
                  static
                >
                  <Menu.Item as="div" disabled={true}>
                    <div className="flex h-full w-[20rem] sm:hidden">
                      <ComboBox
                        smallSearch={true}
                        mobile={false}
                        search={false}
                        customCombo={false}
                        profile={profile}
                        props={props}
                      />
                    </div>
                    {/* visible if less than sm */}
                  </Menu.Item>
                </Menu.Items>
              </Transition>
            </div>
          )}
        </>
      )}
    </Menu>
  );
};

export default SmallSearchButton;