import React, { useState } from "react";
import classNames from "../../../utils/helpers/className";

import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import MoreIcon from "../moreInfo";
import ProfileIcon from "../../buttons/profileButton";
import {
  ChannelIcon,
  CreatorIcon,
  DarkToggleIcon,
  EmoteAttIcon,
  LanguageIcon,
  LogOutIcon,
  NavDropIcon,
  NavSubIcon,
  OptOutIcon,
  SafetyIcon,
  SettingsIcon,
  VideoProIcon,
  WalletIcon,
} from "../../../utils/navProfileIcons";
import ProfileButtonXl from "../../buttons/profileButtonXl";
import { profile } from "console";
import ToggleButton from "../../buttons/toggleButton";
import MobileProfile from "../../../utils/icons/mobileProfile";

function ProfileDropdown({
  profile,
  mobile,
}: {
  mobile?: boolean;
  profile?: any;
}) {
  const [showLanguage, setShowLanguage] = useState(false);
  const links = [
    { href: "/account-settings", label: "Channel" },
    { href: "/support", label: "Video Producer" },
    { href: "/license", label: "Creator Dashboard" },
    { href: "/sign-out", label: "Safety" },

    { href: "/sign-out", label: "Emote Attribution" },
    { href: "/sign-out", label: "Subscriptions" },
    { href: "/sign-out", label: "Drops & Rewards" },
    { href: "/sign-out", label: "Wallet" },
    { href: "/sign-out", label: "Settings" },
    { href: "/sign-out", label: "Language" },
    { href: "/sign-out", label: "Dark Theme" },

    { href: "/sign-out", label: "Opt-out Preferences" },
    { href: "/sign-out", label: "Log Out" },
  ];
  const mobileProfile = [
    { href: "/support", label: "Open in App" },
    { href: "/support", label: "Add to Home Screen" },
    { href: "/license", label: "Toggle Light Theme" },
  ];
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    console.log(mobile, "The link was clicked.");
  };
  return (
    <Menu>
      <div className="relative flex">
        <Menu.Button>
          {mobile ? <MobileProfile /> : <ProfileIcon />}
        </Menu.Button>
      </div>
      <div
        className={classNames(
          mobile ? "z-[20]" : "",
          "absolute flex h-auto w-[11.375rem] -translate-x-[10.0rem] -translate-y-[0.1rem] flex-col items-center justify-center rounded-md  bg-[#1E1E20]  shadow-lg"
        )}
      >
        <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"
        >
          {!showLanguage ? (
            <Menu.Items className="m-2 flex w-11/12 flex-col focus:outline-none">
              <Menu.Item
                disabled
                as="div"
                className={classNames(mobile ? "hidden" : "")}
              >
                <div className="flex rounded-t-md border-b-[0.050rem] border-[rgba(83,83,95,0.48)]  bg-[#1E1E20]  py-2 text-slate-200 ">
                  <ProfileButtonXl />
                  <p className="flex flex-col justify-center pl-1.5 text-sm">{`ShoutsAtGoats`}</p>
                </div>
              </Menu.Item>
              {mobile
                ? mobileProfile.map((link, index) => (
                    <Menu.Item
                      key={`pTabMobile-${index}`}
                      as="div"
                      onClick={() => handleClick}
                    >
                      {({ active }) => (
                        <button
                          onClick={() => handleClick}
                          className={classNames(
                            "group flex w-full items-center px-4 py-1 text-sm text-violet-400"
                          )}
                        >
                          {link.label}
                        </button>
                      )}
                    </Menu.Item>
                  ))
                : links.map((link, index) => (
                    <div
                      key={`pTabMobile-${index}`}
                      className={classNames(
                        link.label == "Safety" ||
                          link.label == "Emote Attribution" ||
                          link.label == "Wallet" ||
                          link.label == "Opt-out Preferences"
                          ? "border-b-[0.050rem] border-[rgba(83,83,95,0.48)] pb-1.5"
                          : null,
                        link.label == "Log Out" ? "flex" : "flex",
                        "  bg-[#1E1E20]  pt-1.5"
                      )}
                    >
                      <Menu.Item>
                        <div className="flex flex-col items-center justify-center  bg-[#1E1E20] ">
                          {link.label == "Channel" ? (
                            <ChannelIcon />
                          ) : link.label == "Video Producer" ? (
                            <VideoProIcon />
                          ) : link.label == "Safety" ? (
                            <SafetyIcon />
                          ) : link.label == "Emote Attribution" ? (
                            <EmoteAttIcon />
                          ) : link.label == "Subscriptions" ? (
                            <NavSubIcon />
                          ) : link.label == "Drops & Rewards" ? (
                            <NavDropIcon />
                          ) : link.label == "Wallet" ? (
                            <WalletIcon />
                          ) : link.label == "Settings" ? (
                            <SettingsIcon />
                          ) : link.label == "Language" ? (
                            <LanguageIcon />
                          ) : link.label == "Dark Theme" ? (
                            <DarkToggleIcon />
                          ) : link.label == "Opt-out Preferences" ? (
                            <OptOutIcon />
                          ) : (
                            <LogOutIcon />
                          )}
                        </div>
                      </Menu.Item>
                      <Menu.Item>
                        {({ active }) => (
                          <button
                            className={`${
                              active
                                ? "bg-violet-500 text-white"
                                : " bg-[#1E1E20]  text-slate-200"
                            } group flex w-full items-center px-2 pt-1 text-sm`}
                          >
                            <a className="text-[0.8rem] xl:text-xs">
                              {link.label}
                            </a>
                          </button>
                        )}
                      </Menu.Item>
                      <Menu.Item>
                        <div className="flex flex-col items-center justify-center pr-[0.125rem]">
                          {link.label == "Dark Theme" ? (
                            <ToggleButton />
                          ) : link.label == "Language" ? (
                            <div></div>
                          ) : null}
                        </div>
                      </Menu.Item>
                    </div>
                  ))}
              <div
                className={classNames(
                  mobile ? "flex" : "hidden",
                  " mt-1 w-full flex-col items-center justify-center"
                )}
              >
                <div className="w-[85%] border-t-2 border-solid border-[#32343b] px-3 pt-1"></div>
              </div>
              <Menu.Item as="div" onClick={() => handleClick}>
                {({ active }) => (
                  <button
                    onClick={() => handleClick}
                    className={classNames(
                      !mobile ? "hidden" : "flex",
                      "group w-full items-center px-4 py-1 text-sm text-violet-400"
                    )}
                  >
                    <a>Logout</a>
                  </button>
                )}
              </Menu.Item>
            </Menu.Items>
          ) : (
            <div>
              <Menu.Items className="m-2 flex w-11/12 flex-col border border-white shadow-lg focus:outline-none">
                <Menu.Item disabled>
                  <div className="flex rounded-t-md border-b-[0.050rem] border-[rgba(83,83,95,0.48)] bg-slate-900 py-2 text-slate-200 ">
                    <p>Language Selection Section</p>
                  </div>
                </Menu.Item>
              </Menu.Items>
            </div>
          )}
        </Transition>
      </div>
    </Menu>
  );
}
export default ProfileDropdown;