import React, { useEffect, useState } from "react";

import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import MoreIcon from "../../navbar/moreInfo";
import RewardSlider from "../../navbar/rewardSlider";
import { UserProfile } from "../../../types/notifications";
import MessageSearchBar from "../../navbar/pmSearch";
import WhisperButton from "../whisperButton";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";

const PmButton = ({ user }: { user: UserProfile }) => {
  const [profile, setProfile] = useState<UserProfile>();
  const links = [
    { href: "/account-settings", label: "About" },
    { href: "/support", label: "Advertisers" },
    { href: "/sign-out", label: "Developers" },
    { href: "/sign-out", label: "Partners" },
    { href: "/sign-out", label: "Turbo" },
  ];

  const helpLegal = [
    { href: "/sign-out", label: "Accessibility Statement" },
    { href: "/sign-out", label: "Community Guidelines" },
    { href: "/sign-out", label: "Security" },
    { href: "/sign-out", label: "Terms" },
  ];

  const titles = [{ href: "/sign-out", label: "General" }];
  useEffect(() => {
    if (user !== undefined) {
      // console.log(user.messages, "user check");
      setProfile(user);
    }
  }, [user]);
  return (
    <Menu>
      {({ open }) => (
        <>
          <div className="relative flex flex-col items-center justify-center">
            <Menu.Button>
              <TooltipBottom
                text={<WhisperButton />}
                tip={"Whispers"}
                opened={open}
              />
              {/* <WhisperButton /> */}
              {/* <a className="flex flex-col items-center justify-center">
                <svg
                  className="w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="#FFFFFF"
                    d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M20 16H5.2L4 17.2V4H20V16Z"
                  />
                </svg>
              </a> */}
            </Menu.Button>
          </div>
          {open ? (
            <Menu.Items
              as="div"
              className="absolute z-10 w-[21rem] translate-y-[1.2rem] -translate-x-[19.813rem] overflow-auto scroll-auto rounded-md"
            >
              <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"
              >
                <div className=" flex  flex-col   bg-[#1E1E20]  shadow-lg focus:outline-none">
                  <Menu.Item disabled>
                    <div className="relative flex flex-grow  bg-[#1E1E20]  px-4 py-1">
                      <span className="w-full grow rounded-t-md  bg-[#1E1E20]  text-center text-[0.8rem] font-bold text-[#efeff1]">
                        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-[16.000rem] -translate-y-[0.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>
                      <svg
                        width="100%"
                        height="100%"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        className="absolute ml-2 w-6 translate-x-[17.45rem] -translate-y-[0.25rem] cursor-pointer"
                      >
                        <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>
                  </Menu.Item>
                  <Menu.Item disabled={true}>
                    <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>
                  </Menu.Item>
                </div>
              </Transition>
            </Menu.Items>
          ) : null}
        </>
      )}
    </Menu>
  );
};
export default PmButton;