import React from "react";

import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import MoreIcon from "../moreInfo";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
import classNames from "../../../utils/helpers/className";
function MoreDropdown({ mobile }: { mobile?: boolean | undefined }) {
  const links = [
    { href: "/account-settings", label: "About" },
    { href: "/support", label: "Advertisers" },
    { href: "/license", label: "Blog" },
    { href: "/sign-out", label: "Developers" },

    { href: "/sign-out", label: "Download Apps" },
    { href: "/sign-out", label: "Gift Card" },
    { href: "/sign-out", label: "IGDB" },
    { href: "/sign-out", label: "Jobs" },
    { href: "/sign-out", label: "Loot Cave - Merch Store" },
    { href: "/sign-out", label: "Music on Twitch" },
    { href: "/sign-out", label: "Partners" },

    { href: "/sign-out", label: "Turbo" },
  ];

  const helpLegal = [
    { href: "/sign-out", label: "Accessibility Statement" },
    { href: "/sign-out", label: "Ad Choices" },
    { href: "/sign-out", label: "Community Guidelines" },
    { href: "/sign-out", label: "Cookie Policy" },

    { href: "/sign-out", label: "Help" },
    { href: "/sign-out", label: "Privacy Policy" },
    { href: "/sign-out", label: "Safety Center" },
    { href: "/sign-out", label: "Security" },
    { href: "/sign-out", label: "Terms" },
  ];
  const mobileButtons = [
    { href: "/sign-out", label: "Privacy Policy" },
    { href: "/sign-out", label: "Cookie Policy" },
    { href: "/sign-out", label: "Terms of Service" },
  ];

  const titles = [{ href: "/sign-out", label: "General" }];
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    console.log("The link was clicked.");
  };
  return (
    <Menu>
      {({ open }) => (
        <>
          <div className="relative flex">
            <Menu.Button>
              {mobile ? (
                <MoreIcon />
              ) : (
                <TooltipBottom text={<MoreIcon />} tip={"More"} opened={open} />
              )}
            </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"
                  : "z-20 translate-y-[18.2rem] translate-x-[4.0rem] 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>
                    {mobile ? (
                      <span className="w-full whitespace-nowrap  rounded-t-md px-4 py-2 text-[#adadb8]">
                        Help & Legal
                      </span>
                    ) : (
                      <span className="rounded-t-md pt-1 pl-3 text-[0.65rem] font-bold text-[#adadb8]">
                        GENERAL
                      </span>
                    )}
                  </Menu.Item>
                  {mobile
                    ? mobileButtons.map((link, index) => (
                        <Menu.Item
                          key={`mobileButton-${index}`}
                          as="div"
                          onClick={() => handleClick}
                        >
                          {({ active }) => (
                            <button
                              onClick={() => handleClick}
                              className={classNames(
                                "group flex w-full items-center px-4 py-1  text-violet-400"
                              )}
                            >
                              <a className="text-[0.55rem]">{link.label}</a>
                            </button>
                          )}
                        </Menu.Item>
                      ))
                    : links.map((link, index) => (
                        /* Use the `active` state to conditionally style the active item. */
                        <Menu.Item
                          key={`mobileLink-${index}`}
                          as="div"
                          onClick={() => handleClick}
                          className="flex items-start justify-center"
                        >
                          {({ active }) => (
                            <button
                              onClick={() => handleClick}
                              className={`${
                                active
                                  ? "rounded-sm border-0 border-transparent bg-[#3b3b44] text-red-400 ring-0 ring-transparent focus:outline-none focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0"
                                  : "  "
                              } group flex w-[87%] items-start px-1 py-1  text-[#efeff1]`}
                            >
                              <a className="whitespace-nowrap text-[0.70rem] leading-4">
                                {link.label}
                              </a>
                            </button>
                          )}
                        </Menu.Item>
                      ))}
                  <div
                    className={classNames(
                      mobile ? "flex" : "hidden",
                      " w-full flex-col items-center justify-center"
                    )}
                  >
                    <div className="w-[82%] border-t-2 border-solid border-[#32343b] px-3 pt-1"></div>
                  </div>
                  <div
                    className={classNames(
                      mobile
                        ? "flex flex-col items-start justify-center py-2 pl-4"
                        : "hidden",
                      ""
                    )}
                  >
                    <a className="text-xs text-[#adadb8]">Build ID</a>
                    <a className=" text-xs text-[#adadb8]">j1l8gan98</a>
                  </div>
                  <div
                    className={classNames(
                      mobile ? "hidden" : "border-t-1 border-red-500",
                      ""
                    )}
                  >
                    <div
                      className={classNames(
                        mobile ? "hidden" : "flex",
                        " w-full flex-col items-center justify-center"
                      )}
                    >
                      <div className="w-[82%] border-t-2 border-solid border-[#32343b] px-3 pt-1"></div>
                    </div>
                    <Menu.Item>
                      <span className="  rounded-t-md pt-1 pl-3 text-[0.65rem] font-bold text-[#adadb8]">
                        HELP & LEGAL
                      </span>
                    </Menu.Item>
                    {helpLegal.map((link, index) => (
                      /* Use the `active` state to conditionally style the active item. */
                      <Menu.Item
                        key={`mobileLegal-${index}`}
                        as="div"
                        onClick={() => handleClick}
                        className="flex items-start justify-center"
                      >
                        {({ active }) => (
                          <button
                            onClick={() => handleClick}
                            className={`${
                              active
                                ? "rounded-sm border-0 border-transparent bg-[#3b3b44] text-red-400 ring-0 ring-transparent focus:outline-none focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0"
                                : "  "
                            } group flex w-[87%] items-start px-1 py-1 pr-8 text-[#efeff1]`}
                          >
                            <a className="whitespace-nowrap text-[0.70rem] leading-4">
                              {link.label}
                            </a>
                          </button>
                        )}
                      </Menu.Item>
                    ))}
                  </div>
                </Menu.Items>
              </Transition>
            </div>
          )}
        </>
      )}
    </Menu>
  );
}
export default MoreDropdown;