import { Currency, ETHER, Token } from '@uniswap/sdk';
import React, { useMemo } from 'react';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import EthereumLogo from 'assets/images/Currency/PolygonSwap.svg';
import useHttpLocations from 'hooks/useHttpLocations';
import { WrappedTokenInfo } from 'state/lists/hooks';
import { Logo } from 'components';
import { getTokenLogoURL } from 'utils/getTokenLogoURL';

const useStyles = makeStyles(({}) => ({
  logoStyled: {
    boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.075)',
    borderRadius: 24,
  },
}));

interface CurrencyLogoProps {
  currency?: Currency;
  size?: string;
  style?: React.CSSProperties;
}

const CurrencyLogo: React.FC<CurrencyLogoProps> = ({
  currency,
  size = '24px',
  style,
}) => {
  const classes = useStyles();
  const uriLocations = useHttpLocations(
    currency instanceof WrappedTokenInfo ? currency.logoURI : undefined,
  );

  const srcs: string[] = useMemo(() => {
    if (currency === ETHER) return [];

    if (currency instanceof Token) {
      if (currency instanceof WrappedTokenInfo) {
        return [...getTokenLogoURL(currency.address), ...uriLocations];
      }

      return getTokenLogoURL(currency.address);
    }
    return [];
  }, [currency, uriLocations]);

  if (currency === ETHER) {
    return (
      <Box
        style={style}
        width={size}
        height={size}
        borderRadius={size}
        overflow='hidden'
      >
        <img
          className={classes.logoStyled}
          style={{ width: size, height: size }}
          src={EthereumLogo}
          alt='Ethereum Logo'
        />
      </Box>
    );
  }

  return (
    <Box
      width={size}
      height={size}
      borderRadius={size}
      overflow='hidden'
      bgcolor='white'
      display='flex'
      justifyContent='center'
      alignItems='center'
    >
      <Logo
        srcs={srcs}
        size={size}
        alt={`${currency?.symbol ?? 'token'} logo`}
      />
    </Box>
  );
};

export default CurrencyLogo;