import { useWallet } from "@src/context/WalletProvider";
import { SwapPanelType } from "../..";
import { Chain } from "@src/models";
import { useCallback } from "react";
import { shortAddress } from "@src/utils";

type Props = {
  chain: Chain | undefined;
  type: SwapPanelType;
  className?: string;
};

export const WalletPanel = ({ chain, type, className }: Props) => {
  const { setOpenEVMWalletModal, setOpenSolanaWalletModal, evm, solana } =
    useWallet();
  const openWalletModal = useCallback(() => {
    if (!chain) {
      return;
    }
    if (chain.ecosystem === "evm") {
      setOpenEVMWalletModal(true);
      evm.connectWallet();
    } else if (chain.ecosystem === "solana") {
      setOpenSolanaWalletModal(true);
      solana.connectWallet();
    }
  }, [chain, evm, solana, setOpenEVMWalletModal, setOpenSolanaWalletModal]);
  const renderAddress = useCallback(
    (chainEcosystem: string) => {
      if (chainEcosystem === "evm") {
        return shortAddress(evm.address || "");
      } else if (chainEcosystem === "solana") {
        return shortAddress(solana.address || "");
      }
    },
    [evm, solana],
  );
  return (
    <>
      <button
        type="button"
        onClick={() => openWalletModal()}
        className={`${className || ""}`}
      >
        <div className="flex justify-between items-center p-4 gap-8">
          <div className="flex flex-col items-start">
            {type === "source" ? (
              <div className="flex items-center gap-2">
                <p className="text-xs font-medium opacity-60">Sender:</p>
                {chain && (
                  <p className="text-sm font-medium">
                    {renderAddress(chain.ecosystem)}
                  </p>
                )}
              </div>
            ) : (
              <div className="flex items-center gap-2">
                <p className="text-xs font-medium opacity-60">Receiver:</p>
                {chain && (
                  <p className="text-sm font-medium">
                    {renderAddress(chain.ecosystem)}
                  </p>
                )}
              </div>
            )}
          </div>
        </div>
      </button>
    </>
  );
};