import { LightningIcon } from "@src/assets/icons/LightningIcon";
import { IconWithTooltip, Skeleton, TokenLogo } from "@src/components";
import { usePrivySmartWallet, useSwapContext } from "@src/contexts";
import { Balances } from "@src/interfaces";
import { Chain, TokenWithChain } from "@src/models";

type Props = {
  token: TokenWithChain & {
    value: string | undefined;
    balance: Balances | undefined;
  };
  selectedTokenAddress: string | undefined;
  currentChain: Chain | undefined;
  onClick: () => void;
  isFetchingBalances: boolean;
};
export const TokenItem = ({
  token,
  selectedTokenAddress,
  currentChain,
  onClick,
  isFetchingBalances,
}: Props) => {
  const { isMultichain, supportedChainsMap } = useSwapContext();
  const { smartWalletAddress } = usePrivySmartWallet();
  return (
    <div
      aria-label={`Select token ${token.symbol} on chain ${token.chainId}`}
      className={`token-picker-container rounded-[12px] hover:bg-bg_text_primary/10 ${
        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
        token.chainId === currentChain?.chainId &&
        "bg-card_bg"
      }`}
      // NOTE: used in e2e tests — do not remove
      data-testid={`token-item-${token.tokenId.toLowerCase()}-${token.chainId.toLowerCase()}`}
      onClick={onClick}
    >
      <TokenLogo
        token={token}
        withChain={isMultichain}
        tokenLogoClassName="w-8 min-w-8 h-8"
        unknownTokenLogoClassName="w-8 min-w-8 h-8 text-md"
        chain={supportedChainsMap[token.chainId]}
      />
      <div className="flex justify-between items-center gap-1 w-full">
        <div className="flex gap-2 items-center">
          <div className="text-xl font-medium text-text_primary">
            {token.symbol}
          </div>
          {token.chainlinkFunctionSupport && (
            <div>
              <IconWithTooltip
                tooltipText="No need to buy USDC first. Just enter your card and buy this token directly."
                id="cash-tooltip"
                icon={LightningIcon}
                iconClassName="!opacity-100 hover:!opacity-50"
              />
            </div>
          )}
        </div>
        {smartWalletAddress && (
          <>
            {token.balance !== undefined && token.decimals ? (
              <div className="flex flex-col gap-1 items-end">
                {token.value && (
                  <div className="text-xs font-bold text-text_primary leading-3">{`$${token.value}`}</div>
                )}
                <div className="text-xs text-text_primary text-opacity-60 leading-3">
                  {token.balance.abbreviated}
                </div>
              </div>
            ) : isFetchingBalances ? (
              <div className="flex flex-col gap-1 items-end">
                <Skeleton className="w-12 h-3" />
                <Skeleton className="w-8 h-3" />
              </div>
            ) : null}
          </>
        )}
      </div>
    </div>
  );
};