import {
  Avatar,
  Button,
  IconButton,
  Menu,
  MenuHandler,
  MenuList,
  Typography,
} from "@material-tailwind/react";
import { useState } from "react";
import { IoChevronDownOutline } from "react-icons/io5";
import { MdContentCopy, MdOutlineLogout } from "react-icons/md";
import { TbExternalLink } from "react-icons/tb";

import { PROFILE_PLACEHOLDER_IMAGE } from "../constants/app";
import { ROUTES } from "../constants/routes";
import useCopy from "../hooks/useCopy";
import { _useScopedI18n } from "../i18n/client";
import ButtonCustom from "./Button";

export type ProfileMenuProps = {
  bidNumber?: string;
  userName?: string;
  logout: () => void;
};

export default function ProfileMenu({
  bidNumber = "",
  userName = "",
  logout,
}: ProfileMenuProps) {
  const scopeT = _useScopedI18n("sharedComponents.profileMenuComponent");

  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { handleCopy } = useCopy();

  return (
    <>
      <div className="hidden lg:block">
        <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
          <MenuHandler>
            <Button
              variant="text"
              color="blue-gray"
              className="flex items-center gap-2 rounded-full p-1"
            >
              <Avatar
                variant="circular"
                alt="tania andrew"
                className="border border-slate-50 w-9 h-9"
                src={PROFILE_PLACEHOLDER_IMAGE}
              />
              <Typography
                as="a"
                href="#"
                className="text-sm font-medium text-black-500 capitalize"
              >
                {userName}
              </Typography>
              <IoChevronDownOutline className="h-4 w-4 text-black-500" />
            </Button>
          </MenuHandler>
          <MenuList className="p-3 w-48">
            <div
              className="flex items-center justify-start gap-1 rounded pb-2
                                    hover:bg-white active:bg-white focus:bg-white 
                                    outline-none"
            >
              <IconButton
                variant="outlined"
                className="p-0 rounded-full  border-none h-9 w-9"
                onClick={() => handleCopy(bidNumber)}
              >
                <MdContentCopy className="h-4 w-4" />
              </IconButton>
              <Typography
                variant="h6"
                className="text-black-500 text-sm font-semibold"
              >
                Nid : {bidNumber}
              </Typography>
            </div>

            <div
              className="flex items-center justify-start gap-1 rounded
                                    hover:bg-white active:bg-white focus:bg-white 
                                    outline-none"
            >
              <IconButton
                variant="outlined"
                className="p-0 rounded-full  border-none h-9 w-9"
                onClick={() => window.open(ROUTES.dashboard.nodeLinkProfile)}
              >
                <TbExternalLink className="h-4 w-4" />
              </IconButton>

              <Typography
                variant="h6"
                className="text-black-500 text-sm font-semibold"
              >
                {scopeT("nodeLinkRedirectionLink")}
              </Typography>
            </div>
            <hr className="my-3 block border-slate-50" />
            <div className="flex justify-start items-center rounded p-0 outline-none">
              <ButtonCustom
                icon={<MdOutlineLogout className="h-5 w-5" />}
                className="!justify-start gap-2 font-normal !text-base !px-4  py-2.5 !text-start"
                onClick={logout}
                fullWidth={true}
              >
                {scopeT("logout")}
              </ButtonCustom>
            </div>
          </MenuList>
        </Menu>
      </div>
    </>
  );
}
