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";

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],
  );

  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>
              );
            })}
          </>
        )}
      </div>
    </div>
  );
};