'use client';

import { usePrivy, useWallets } from '@privy-io/react-auth';
import { Button } from '@/components/ui/button';
import { useDisconnect } from 'wagmi';
import { useState } from 'react';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { useAsyncEffect } from '@/lib/hooks/useAsyncEffect';
import useConnector from '@/lib/hooks/useConnector';

export default function ConnectWalletButton() {
  const { ready, authenticated, login, logout } = usePrivy();
  const { wallets } = useWallets();
  const { disconnect } = useDisconnect();

  useConnector();

  const [isDisconnecting, setIsDisconnecting] = useState(false);

  useAsyncEffect(async () => {
    if (ready && !authenticated) {
      disconnect();
      await logout();
    }
  }, [ready, authenticated]);

  const handleDisconnect = async () => {
    setIsDisconnecting(true);
    await disconnect();
    await logout();
    setIsDisconnecting(false);
  };

  const renderButton = () => {
    if (!ready || isDisconnecting) {
      return (
        <Button className="w-[165px] h-[40px]" disabled>
          {isDisconnecting ? 'Disconnecting...' : 'Connecting...'}
        </Button>
      );
    }

    if (wallets.length) {
      const { address } = wallets[0];
      return (
        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger className="w-[165px] h-[40px] rounded-sm font-superstar bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90 flex items-center justify-center">
                {address.slice(0, 6)}...{address.slice(-4)}
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="flex flex-col p-2 w-[165px] bg-zinc-900 rounded-lg border-0 shadow-lg">
                  {/* <Button
                    variant="ghost"
                    className="w-full justify-start py-2 text-white hover:bg-zinc-800 hover:text-white font-superstar"
                    onClick={() => router.push(`/profile/${address}`)}
                  >
                    PROFILE
                  </Button> */}
                  <Button
                    variant="ghost"
                    className="w-full justify-start py-2 text-red-500 hover:bg-zinc-800 hover:text-red-400 font-superstar"
                    onClick={handleDisconnect}
                    disabled={isDisconnecting}
                  >
                    DISCONNECT
                  </Button>
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      );
    }

    return (
      ready &&
      !authenticated && (
        <Button className="w-[165px] h-[40px] font-superstar" onClick={login}>
          Connect Wallet
        </Button>
      )
    );
  };

  return <div className="h-[40px] flex items-center">{renderButton()}</div>;
}