import type { Chain, StaticToken } from '@lifi/sdk';
import type { SxProps, Theme } from '@mui/material';
import { Badge } from '@mui/material';
import { useChain } from '../../hooks/useChain.js';
import { useToken } from '../../hooks/useToken.js';
// import { SmallAvatar } from '../SmallAvatar.js';
import { AvatarBadgedSkeleton } from './Avatar.js';
import {
  // AvatarDefaultBadge,
  AvatarMasked,
} from './Avatar.style.js';

export const TokenAvatar: React.FC<{
  token?: StaticToken;
  chain?: Chain;
  isLoading?: boolean;
  sx?: SxProps<Theme>;
  isFromRoute?: boolean;
}> = ({ token, chain, isLoading, sx, isFromRoute }) => {
  if (!chain || !token?.logoURI) {
    return (
      <TokenAvatarFallback
        token={token}
        isLoading={isLoading}
        sx={sx}
        isFromRoute={isFromRoute}
      />
    );
  }
  return (
    <TokenAvatarBase
      token={token}
      chain={chain}
      isLoading={isLoading}
      sx={sx}
      isFromRoute={isFromRoute}
    />
  );
};

export const TokenAvatarFallback: React.FC<{
  token?: StaticToken;
  isLoading?: boolean;
  sx?: SxProps<Theme>;
  isFromRoute?: boolean;
}> = ({ token, isLoading, sx, isFromRoute }) => {
  const { chain } = useChain(token?.chainId);
  const { token: chainToken, isLoading: isLoadingToken } = useToken(
    token?.chainId,
    token?.address,
  );
  return (
    <TokenAvatarBase
      token={chainToken ?? (token as any)}
      isLoading={isLoading || isLoadingToken}
      chain={chain}
      sx={sx}
      isFromRoute={isFromRoute}
    />
  );
};

export const TokenAvatarBase: React.FC<{
  token?: StaticToken;
  chain?: Chain;
  isLoading?: boolean;
  sx?: SxProps<Theme>;
  isFromRoute?: boolean;
}> = ({ token, chain, isLoading, sx, isFromRoute }) => {
  const avatarStyle = isFromRoute ? {} : { width: 18, height: 18 };

  return isLoading ? (
    <AvatarBadgedSkeleton />
  ) : (
    <Badge
      // overlap="circular"
      // anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      // badgeContent={
      //   chain ? (
      //     <SmallAvatar src={chain.logoURI} alt={chain.name}>
      //       {chain.name[0]}
      //     </SmallAvatar>
      //   ) : (
      //     <AvatarDefaultBadge />
      //   )
      // }
      sx={sx}
    >
      <AvatarMasked
        src={token?.logoURI}
        alt={token?.symbol}
        style={avatarStyle}
      >
        {token?.symbol?.[0]}
      </AvatarMasked>
    </Badge>
  );
};