"use client"

import { useState } from "react";
import { Button } from "@nextui-org/button";
import { Skeleton } from "@nextui-org/skeleton";
import { Tooltip } from "@nextui-org/tooltip";
import Link from "next/link";
import { HiChevronDown, HiIdentification, HiLogout, HiViewGridAdd, HiAdjustments, HiExclamation } from "react-icons/hi";
import Image from "next/image";
import { motion } from 'framer-motion';
import cn from "@/utils/cn";
import { BsDiscord } from "react-icons/bs";

const State = {
  Idle: 0,
  Loading: 1,
  Failure: 2
};

interface Props {
  state?: number;
  message?: string;
  className?: string;
  btnClassname?: string;
  user: User | null;
}

interface User {
  username: string;
  avatar: string;
  id: string;
}

export default function LoginButton({
  state = State.Idle,
  message,
  className,
  btnClassname,
  user,
}: Props) {
  const [menu, setMenu] = useState(false);

  function Icon() {
    if (state === State.Idle) return <BsDiscord />;
    if (state === State.Failure) return <HiExclamation className="h-5 w-5" />;
    return null;
  }

  if (user) {
    const UserButton = (
      <button
        className={cn(
          "ml-auto flex hover:bg-pulsey py-2 px-4 rounded-md duration-200 items-center",
          menu && "bg-pulsey"
        )}
        onClick={() => setMenu(!menu)}
      >
        <Image
            src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.webp`}
            alt="your avatar"
            className="rounded-full mx-2"
            width={30}
            height={30}
        />

        {!user.id ? (
          <Skeleton className="rounded-xl w-20 h-4" />
        ) : (
          <>
            <div className="mr-1 relative bottom-[1px]">@{user.username}</div>
            <HiChevronDown className={`${menu ? "rotate-180 transition-all ease-in-out duration-300" : "rotate-0 transition-all ease-in-out duration-300"}`} />
          </>
        )}
      </button>
    );

    const UserDropdown = (
      <motion.div
        initial="closed"
        animate={menu ? "open" : "closed"}
        exit="closed"
        variants={{
          closed: { y: -10, opacity: 0, scale: 0.95 },
          open: { y: 0, opacity: 1, scale: 1 }
        }}
        className="
          absolute top-8 right-0 min-w-80 z-20 bg-pulsey-900-alpha rounded-xl backdrop-blur-3xl backdrop-brightness-75 overflow-hidden shadow-xl
          flex flex-col py-2 text-base
        "
      >
        <My dropdown here>
    );

    return (
      <div className="relative">
        {UserButton}
        {menu && (
          <div className="absolute right-0 mt-2">
            {UserDropdown}
          </div>
        )}
      </div>
    );
  }

  return (
    <div className={className || "ml-auto"}>
      <Button
        as={Link}
        className={cn(
          "hover:bg-blurple/60 bg-pulsey rounded-lg focus:ring-0 hover:text-white transition-all duration-200 ease-in-out",
          state === State.Failure && "bg-red-500/80 text-white",
          btnClassname
        )}
        href="/login"
        prefetch={false}
        startContent={<Icon />}
      >
        {state === State.Failure ? (
          <span>Authorization failed</span>
        ) : (
          <span className="font-semibold">
            {message || (
              <>
                <span className="hidden md:block">Login with Discord</span>
                <span className="md:hidden">Login</span>
              </>
            )}
          </span>
        )}
      </Button>
    </div>
  );
}