import React, { Fragment, useEffect, useState } from "react";
import classNames from "../className";
import { Transition } from "@headlessui/react";
// import MessageSearchBar from "../../../components/navbar/pmSearch";
import { UserProfile } from "../../../types/notifications";
// import PrimeLogo from "../../../components/buttons/primeLogo";
import TooltipBottom from "../tooltipBottom";
// import WhisperButton from "../../../components/buttons/whisperButton";
import ComboBox from "../../../components/navbar/comboBox";
import SearchIcon from "../../icons/searchIcon";

const SearchDropdown = ({
  mobile,
  props,
  profile,
}: {
  profile: UserProfile;
  mobile: any;
  props: {
    handleClick: (e: any) => void;
    searchTab: boolean;
    opened: boolean;
    setSearchTab: (e: any) => void;
  };
}): JSX.Element => {
  const [opened, setOpened] = useState(false);
  useEffect(() => {
    console.log(opened, "open");
  }, [opened]);
  return (
    <div className="w-full hover:border-0 2xs:w-full ">
      <div className="w-full">
        <div className="group relative flex w-full hover:border-0">
          <div
            role="button"
            onClick={() => setOpened(!opened)}
            className="  inline-flex w-full rounded bg-transparent text-base font-semibold text-white hover:border-0 hover:border-transparent hover:bg-transparent"
          >
            {/* {button} */}
            {/* <PrimeLogo /> */}
            <div className=" relative flex flex-col items-center justify-center">
              <button>
                <TooltipBottom
                  text={
                    <SearchIcon
                      smallSearch={true}
                      mobile={false}
                      search={false}
                    />
                  }
                  tip={"New Prime Loot"}
                  opened={false}
                  special={true}
                />
                {/* <PrimeLogo /> */}
                {/* <a>
            <svg
              className="w-6"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <path
                fill="#FFFFFF"
                d="M12 8L15 13.2L18 10.5L17.3 14H6.7L6 10.5L9 13.2L12 8M12 4L8.5 10L3 5L5 16H19L21 5L15.5 10L12 4M19 18H5V19C5 19.6 5.4 20 6 20H18C18.6 20 19 19.6 19 19V18Z"
              />
            </svg>
          </a> */}
              </button>
            </div>
          </div>

          {/* {drop} */}
          <div className="absolute h-[22rem] w-full translate-y-[1.2rem] -translate-x-[10.013rem] overflow-auto scroll-auto rounded-md">
            {opened && (
              <div
                className={classNames(
                  mobile
                    ? "absolute z-[20] w-[12.23rem] translate-y-[6.25rem]  translate-x-[5.50rem] rounded-md bg-[#1f1f23] shadow-lg"
                    : "h-full w-full translate-y-[2.5rem] -translate-x-[2.5rem] rounded-md",
                  "absolute bg-[#1f1f23]"
                )}
              >
                <Transition
                  as={Fragment}
                  show={opened}
                  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"
                >
                  <div
                    className="relative flex h-full flex-col  shadow-lg focus:outline-none"
                    //onClick={handleClick}
                  >
                    <div>
                      <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 */}
                    </div>
                  </div>
                </Transition>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
    // <div className="w-full hover:border-0 2xs:w-full ">
    //   <div className="w-full">
    //     <div className="group relative flex w-full hover:border-0">
    //       <div
    //         role="button"
    //         onClick={() => setOpened(!opened)}
    //         className="  inline-flex w-full rounded bg-transparent text-base font-semibold text-white hover:border-0 hover:border-transparent hover:bg-transparent"
    //       >
    //         {/* {button} */}
    //         {/* <PrimeLogo /> */}
    //         <TooltipBottom
    //           text={
    //             <SearchIcon smallSearch={true} mobile={false} search={false} />
    //           }
    //           tip={"New Prime Loot"}
    //           opened={opened}
    //           special={true}
    //         />
    //       </div>

    //       <div className="absolute -top-[0.188rem] left-1/2 -z-10 w-full  -translate-x-1/2 rotate-45 rounded-sm bg-black  hover:border-0"></div>
    //       {/* {drop} */}

    //       <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
    //           show={opened}
    //           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"
    //         >
    //           <div
    //             className="relative flex flex-col shadow-lg  focus:outline-none"
    //             //onClick={handleClick}
    //           >
    //             <div>
    //               <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 */}
    //             </div>
    //           </div>
    //         </Transition>
    //       </div>
    //     </div>
    //   </div>
    // </div>
  );
};

export default SearchDropdown;