import { CloseIcon, WalletConnectIcon } from "@src/assets/icons";
import { FC, useCallback, useMemo } from "react";
import { Connector, useConnect } from "wagmi";

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<{ className?: string; onClose: () => void }> = ({
  className,
  onClose,
}) => {
  const { connectors, connectAsync } = useConnect();

  const allowedConnectors = useMemo(() => {
    return connectors.filter((connector) => {
      const isInjected = connector.type === "injected";
      const isInjectedGeneric = connector.name === "Injected";
      const isWalletConnect = connector.type === "walletConnect";

      return isWalletConnect || (isInjected && !isInjectedGeneric);
    });
  }, [connectors]);

  const handleWalletClick = useCallback(
    async (connector: Connector) => {
      await connectAsync({ connector });
      onClose();
    },
    [connectAsync, 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">
        {allowedConnectors.map((connector) => (
          <button
            key={connector.id}
            onClick={() => handleWalletClick(connector)}
            className="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>
          </button>
        ))}
      </div>
    </div>
  );
};