import {
  CloseIcon,
  DotGreenIcon,
  DotRedIcon,
  WalletConnectIcon,
} from "@src/assets/icons";
import { FC, useCallback } from "react";
import { Connector, useAccount, useConnect, useDisconnect } from "wagmi";
import { useWallet as useSolanaWallet } from "@solana/wallet-adapter-react";
import { Ecosystem } from "@src/models";
import {
  useWallets as useSuiWallets,
  useCurrentAccount as useSuiCurrentAccount,
  useCurrentWallet as useSuiCurrentWallet,
  useConnectWallet as useSuiConnectWallet,
  useDisconnectWallet as useSuiDisconnectWallet,
} from "@mysten/dapp-kit";

const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
  connector,
  className,
}) => {
  switch (connector.name) {
    case "WalletConnect": {
      return (
        <WalletConnectIcon
          className={`w-[34px] h-[34px] rounded-md ${className || ""}`}
        />
      );
    }
    default: {
      return (
        <img
          src={connector.icon}
          alt={connector.name}
          className={`w-[34px] h-[34px] rounded-md ${className || ""}`}
        />
      );
    }
  }
};

export const WalletPicker: FC<{
  ecosystem: Ecosystem;
  className?: string;
  onClose: () => void;
}> = ({ ecosystem, className, onClose }) => {
  const { connectors, connectAsync } = useConnect();
  const { connector: activeConnector } = useAccount();
  const { disconnect } = useDisconnect();
  const {
    wallet: activeWallet,
    wallets,
    select,
    connect,
    publicKey,
    disconnect: disconnectSolana,
  } = useSolanaWallet();

  const handleEvmWalletClick = useCallback(
    async (connector: Connector) => {
      try {
        await connectAsync({ connector });
      } catch (error) {
        console.error("Failed to connect EVM wallet:", error);
      } finally {
        onClose();
      }
    },
    [connectAsync, onClose],
  );

  const handleConnectSolana = useCallback(
    async (walletName) => {
      try {
        select(walletName);
        await connect();
      } catch (error) {
        console.error("Failed to connect Solana wallet:", error);
      } finally {
        onClose();
      }
    },
    [connect, select, onClose],
  );

  // ---- SUI ----
  const suiWallets = useSuiWallets();
  const suiAccount = useSuiCurrentAccount();
  const suiCurrentWallet = useSuiCurrentWallet();
  const { mutateAsync: connectSuiWalletMut } = useSuiConnectWallet();
  const { mutateAsync: disconnectSuiWalletMut } = useSuiDisconnectWallet();

  const handleConnectSui = useCallback(
    async (wallet: (typeof suiWallets)[number]) => {
      try {
        await connectSuiWalletMut({ wallet });
      } catch (error) {
        console.error("Failed to connect Sui wallet:", error);
      } finally {
        onClose();
      }
    },
    [connectSuiWalletMut, onClose],
  );

  const handleDisconnectSui = useCallback(async () => {
    try {
      await disconnectSuiWalletMut();
    } catch (error) {
      console.error("Failed to disconnect Sui wallet:", error);
    } finally {
      onClose();
    }
  }, [disconnectSuiWalletMut, onClose]);

  return (
    <div className={`flex flex-col h-full ${className || ""}`}>
      <div className="flex justify-between">
        <div className="text-base/4 mb-4 text-t_text_primary">Pick wallet</div>
        <div
          className="w-4 h-4 fill-t_text_primary cursor-pointer"
          onClick={onClose}
        >
          <CloseIcon />
        </div>
      </div>
      <div className="horizontal-separator" />
      <div className="h-full pt-4">
        {ecosystem === Ecosystem.EVM && (
          <>
            {connectors.map((connector) => {
              const isConnected = activeConnector?.id === connector.id;
              return (
                <button
                  key={connector.id}
                  onClick={async () => {
                    isConnected
                      ? disconnect()
                      : await handleEvmWalletClick(connector);
                    onClose();
                  }}
                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4  border border-solid border-white border-opacity-0 hover:selected-wallet-item"
                >
                  <ConnectorIcon connector={connector} />
                  <div className="text-t_text_primary">{connector.name}</div>
                  {isConnected && (
                    <>
                      <div className="flex w-full justify-end items-baseline gap-1">
                        <div className="group-hover:hidden">
                          <DotGreenIcon />
                        </div>
                        <div className="hidden group-hover:block">
                          <DotRedIcon />
                        </div>
                        <div className="text-t_text_green group-hover:hidden">
                          connected
                        </div>
                        <div className="text-t_text_red hidden group-hover:block">
                          disconnect
                        </div>
                      </div>
                    </>
                  )}
                </button>
              );
            })}
          </>
        )}
        {ecosystem === Ecosystem.SOLANA && (
          <>
            {wallets.map((wallet) => {
              const isConnected =
                publicKey && activeWallet?.adapter.name === wallet.adapter.name;
              return (
                <button
                  key={wallet.adapter.name}
                  onClick={async () => {
                    isConnected
                      ? await disconnectSolana()
                      : await handleConnectSolana(wallet.adapter.name);
                    onClose();
                  }}
                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4  border border-solid border-white border-opacity-0 hover:selected-wallet-item"
                >
                  <img
                    src={wallet.adapter.icon}
                    alt={wallet.adapter.name}
                    className={`w-[34px] h-[34px] rounded-md ${
                      className || ""
                    }`}
                  />
                  <div className="text-t_text_primary">
                    {wallet.adapter.name}
                  </div>
                  {isConnected && (
                    <>
                      <div className="flex w-full justify-end items-baseline gap-1">
                        <div className="group-hover:hidden">
                          <DotGreenIcon />
                        </div>
                        <div className="hidden group-hover:block">
                          <DotRedIcon />
                        </div>
                        <div className="text-t_text_green group-hover:hidden">
                          connected
                        </div>
                        <div className="text-t_text_red hidden group-hover:block">
                          disconnect
                        </div>
                      </div>
                    </>
                  )}
                </button>
              );
            })}
          </>
        )}
        {ecosystem === Ecosystem.SUI && (
          <>
            {suiWallets.map((wallet) => {
              const isConnected =
                !!suiAccount?.address &&
                suiCurrentWallet?.currentWallet?.name === wallet.name;

              const icon = wallet.icon;

              return (
                <button
                  key={wallet.name}
                  onClick={async () => {
                    isConnected
                      ? await handleDisconnectSui()
                      : await handleConnectSui(wallet);
                  }}
                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-wallet-item"
                >
                  {icon ? (
                    <img
                      src={icon}
                      alt={wallet.name}
                      className={`w-[34px] h-[34px] rounded-md ${
                        className || ""
                      }`}
                    />
                  ) : (
                    <div className="w-[34px] h-[34px] rounded-md bg-white/10" />
                  )}

                  <div className="text-t_text_primary">{wallet.name}</div>

                  {isConnected && (
                    <div className="flex w-full justify-end items-baseline gap-1">
                      <div className="group-hover:hidden">
                        <DotGreenIcon />
                      </div>
                      <div className="hidden group-hover:block">
                        <DotRedIcon />
                      </div>
                      <div className="text-t_text_green group-hover:hidden">
                        connected
                      </div>
                      <div className="text-t_text_red hidden group-hover:block">
                        disconnect
                      </div>
                    </div>
                  )}
                </button>
              );
            })}
          </>
        )}
      </div>
    </div>
  );
};