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";

const MessageDropDown = ({
  button,
  drop,
  profile,
}: {
  profile: UserProfile;
  button?: any;
  drop?: any;
}): 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={<WhisperButton />}
                  tip={"New Prime Loot"}
                  opened={opened}
                  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>

          <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="absolute w-[21rem] translate-y-[1.2rem] -translate-x-[19.813rem] overflow-auto scroll-auto rounded-md">
            <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=" flex  flex-col   bg-[#1E1E20]  shadow-lg focus:outline-none">
                <div>
                  <div className="relative flex flex-grow  bg-[#1E1E20]  p-4 ">
                    <span className="w-full grow rounded-t-md  bg-[#1E1E20]  text-center text-slate-200">
                      Whispers
                    </span>
                    <svg
                      width="100%"
                      height="100%"
                      version="1.1"
                      viewBox="0 0 20 20"
                      x="0px"
                      y="0px"
                      className="absolute w-6 translate-x-[15.875rem] -translate-y-[1.25rem] cursor-pointer"
                      fill="white"
                    >
                      <g>
                        <path d="M10 8a2 2 0 100 4 2 2 0 000-4z"></path>
                        <path
                          fill-rule="evenodd"
                          d="M9 2h2a2.01 2.01 0 001.235 1.855l.53.22a2.01 2.01 0 002.185-.439l1.414 1.414a2.01 2.01 0 00-.439 2.185l.22.53A2.01 2.01 0 0018 9v2a2.01 2.01 0 00-1.855 1.235l-.22.53a2.01 2.01 0 00.44 2.185l-1.415 1.414a2.01 2.01 0 00-2.184-.439l-.531.22A2.01 2.01 0 0011 18H9a2.01 2.01 0 00-1.235-1.854l-.53-.22a2.009 2.009 0 00-2.185.438L3.636 14.95a2.009 2.009 0 00.438-2.184l-.22-.531A2.01 2.01 0 002 11V9c.809 0 1.545-.487 1.854-1.235l.22-.53a2.009 2.009 0 00-.438-2.185L5.05 3.636a2.01 2.01 0 002.185.438l.53-.22A2.01 2.01 0 009 2zm-4 8l1.464 3.536L10 15l3.535-1.464L15 10l-1.465-3.536L10 5 6.464 6.464 5 10z"
                          clip-rule="evenodd"
                        ></path>
                      </g>
                    </svg>
                    <div
                      role="button"
                      onClick={() => setOpened(!opened)}
                      className="absolute flex w-6 translate-x-[17.75rem] -translate-y-[1.25rem] cursor-pointer flex-col items-center justify-center"
                    >
                      <svg
                        width="100%"
                        height="100%"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        className=" ml-2 w-full "
                      >
                        <path d="M8.5 10 4 5.5 5.5 4 10 8.5 14.5 4 16 5.5 11.5 10l4.5 4.5-1.5 1.5-4.5-4.5L5.5 16 4 14.5 8.5 10z"></path>
                      </svg>
                    </div>
                  </div>
                </div>
                <div>
                  <div className=" flex flex-col justify-center  bg-[#1E1E20] ">
                    <div className="flex justify-start">
                      {" "}
                      {/* searchbar section  */}
                      {profile && (
                        <div className="flex h-[14.5rem] w-[25rem] flex-col items-center justify-start scroll-auto  bg-gray-900 ">
                          <MessageSearchBar user={profile} />
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </Transition>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MessageDropDown;