import React, { SVGProps } from 'react';

import { ReactComponent as AAVEIcon } from './assets/aave.svg';
import { ReactComponent as ADAIcon } from './assets/ada.svg';
import { ReactComponent as AEROIcon } from './assets/aero.svg';
import { ReactComponent as AI16ZIcon } from './assets/ai16z.svg';
import { ReactComponent as AIXBTIcon } from './assets/aixbt.svg';
import { ReactComponent as APEIcon } from './assets/APE.svg';
import { ReactComponent as APTIcon } from './assets/apt.svg';
import { ReactComponent as ArbIcon } from './assets/arb.svg';
import { ReactComponent as AsterIcon } from './assets/aster.svg';
import { ReactComponent as ATOMIcon } from './assets/atom.svg';
import { ReactComponent as AvaxIcon } from './assets/avax.svg';
import { ReactComponent as BERAIcon } from './assets/BERA.svg';
import { ReactComponent as BNBIcon } from './assets/bnb.svg';
import { ReactComponent as BonkIcon } from './assets/bonk.svg';
import { ReactComponent as BTCIcon } from './assets/btc.svg';
import { ReactComponent as CRVIcon } from './assets/crv.svg';
import { ReactComponent as DAIIcon } from './assets/dai.svg';
import { ReactComponent as DOGEIcon } from './assets/doge.svg';
import { ReactComponent as DOTIcon } from './assets/dot.svg';
import { ReactComponent as EigenIcon } from './assets/eigen.svg';
import { ReactComponent as ETHIcon, ReactComponent as WETHIcon } from './assets/eth.svg';
import { ReactComponent as EthenaIcon } from './assets/ethena.svg';
import { ReactComponent as FantomIcon } from './assets/fantom.svg';
import { ReactComponent as FARTCOINIcon } from './assets/fartcoin.svg';
import { ReactComponent as GOATIcon } from './assets/goat.svg';
import { ReactComponent as GRASSIcon } from './assets/grass.svg';
import { ReactComponent as GRIFFAINIcon } from './assets/GRIFFAIN.svg';
import { ReactComponent as HypeIcon } from './assets/hype.svg';
import { ReactComponent as INJIcon } from './assets/INJ.svg';
import { ReactComponent as IPIcon } from './assets/IP.svg';
import { ReactComponent as JTOIcon } from './assets/jto.svg';
import { ReactComponent as JUPIcon } from './assets/jup.svg';
import { ReactComponent as KAITOIcon } from './assets/kaito.svg';
import { ReactComponent as kNEIROIcon } from './assets/kneiro.svg';
import { ReactComponent as LAYERIcon } from './assets/LAYER.svg';
import { ReactComponent as LDOIcon } from './assets/ldo.svg';
import { ReactComponent as LineaIcon } from './assets/linea.svg';
import { ReactComponent as LINKIcon } from './assets/link.svg';
import { ReactComponent as LTCIcon } from './assets/ltc.svg';
import { ReactComponent as MATICIcon } from './assets/matic.svg';
import { ReactComponent as MEIcon } from './assets/ME.svg';
import { ReactComponent as MEGAIcon } from './assets/mega.svg';
import { ReactComponent as MKRIcon } from './assets/mkr.svg';
import { ReactComponent as MORPHOIcon } from './assets/morpho.svg';
import { ReactComponent as MOVEIcon } from './assets/MOVE.svg';
import { ReactComponent as NearIcon } from './assets/near.svg';
import { ReactComponent as ONDOIcon } from './assets/ONDO.svg';
import { ReactComponent as OpIcon } from './assets/op.svg';
import { ReactComponent as PAXGIcon } from './assets/paxg.svg';
import { ReactComponent as PendleIcon } from './assets/pendle.svg';
import { ReactComponent as PENGUIcon } from './assets/pengu.svg';
import { ReactComponent as PEPEIcon } from './assets/pepe.svg';
import { ReactComponent as POLIcon } from './assets/pol.svg';
import { ReactComponent as PopcatIcon } from './assets/popcat.svg';
import { ReactComponent as ProveIcon } from './assets/PROVE.svg';
import { ReactComponent as PumpIcon } from './assets/pump.svg';
import { ReactComponent as PYTHIcon } from './assets/pyth.svg';
import { ReactComponent as RETHIcon } from './assets/reth.svg';
import { ReactComponent as RUSDIcon } from './assets/rusd.svg';
import { ReactComponent as SEIIcon } from './assets/SEI.svg';
import { ReactComponent as SETHIcon } from './assets/seth.svg';
import { ReactComponent as SHIBICON } from './assets/shib.svg';
import { ReactComponent as SOLIcon } from './assets/sol.svg';
import { ReactComponent as SonicIcon } from './assets/sonic.svg';
import { ReactComponent as SUIIcon } from './assets/SUI.svg';
import { ReactComponent as SYRUPIcon } from './assets/syrup.svg';
import { ReactComponent as TAOIcon } from './assets/TAO.svg';
import { ReactComponent as TIAIcon } from './assets/TIA.svg';
import { ReactComponent as TONIcon } from './assets/ton.svg';
import { ReactComponent as TRUMPIcon } from './assets/trump.svg';
import { ReactComponent as TRXIcon } from './assets/trx.svg';
import { ReactComponent as UNIIcon } from './assets/uni.svg';
import { ReactComponent as USDCIcon } from './assets/usdc.svg';
import { ReactComponent as USDEIcon } from './assets/usde.svg';
import { ReactComponent as USDTIcon } from './assets/usdt.svg';
import { ReactComponent as VirtualIcon } from './assets/virtual.svg';
import { ReactComponent as WBTCIcon } from './assets/wbtc.svg';
import { ReactComponent as WIFIcon } from './assets/wif.svg';
import { ReactComponent as WLDIcon } from './assets/wld.svg';
import { ReactComponent as WLFIcon } from './assets/wlfi.svg';
import { ReactComponent as WSTETHIcon } from './assets/wsteth.svg';
import { ReactComponent as XPLIcon } from './assets/xpl.svg';
import { ReactComponent as XRPIcon } from './assets/XRP.svg';
import { ReactComponent as YZYIcon } from './assets/yzy.svg';
import { ReactComponent as ZORAIcon } from './assets/zora.svg';
import { ReactComponent as ZROIcon } from './assets/ZRO.svg';

export type IconProps = {
  className?: string;
  'data-testid'?: string;
  height?: number;
  token: SupportedTokenIcons | string;
  width?: number;
};

export type SupportedTokenIcons =
  | 'mega'
  | 'aster'
  | 'linea'
  | 'wlfi'
  | 'xpl'
  | 'yzy'
  | 'paxg'
  | 'wsteth'
  | 'aero'
  | 'syrup'
  | 'zora'
  | 'morpho'
  | 'kaito'
  | 'pump'
  | 'bera'
  | 'layer'
  | 'tao'
  | 'ip'
  | 'me'
  | 'ape'
  | 'ondo'
  | 'move'
  | 'inj'
  | 'griffain'
  | 'atom'
  | 'wld'
  | 'ton'
  | 'trx'
  | 'ai16z'
  | 'aixbt'
  | 'fartcoin'
  | 'hype'
  | 's'
  | 'virtual'
  | 'trump'
  | 'jup'
  | 'dot'
  | 'ltc'
  | 'pyth'
  | 'pengu'
  | 'goat'
  | 'grass'
  | 'kneiro'
  | 'eigen'
  | 'ena'
  | 'ftm'
  | 'near'
  | 'pendle'
  | 'ada'
  | 'ldo'
  | 'pol'
  | 'apt'
  | 'bnb'
  | 'jto'
  | 'popcat'
  | 'kbonk'
  | 'aave'
  | 'arb'
  | 'op'
  | 'avax'
  | 'btc'
  | 'dai'
  | 'deusd'
  | 'crv'
  | 'eth'
  | 'link'
  | 'matic'
  | 'mkr'
  | 'reth'
  | 'rusd'
  | 'sdeusd'
  | 'seth'
  | 'sol'
  | 'susde'
  | 'usdc'
  | 'usdc.e'
  | 'usde'
  | 'usdt'
  | 'wbtc'
  | 'weth'
  | 'uni'
  | 'sui'
  | 'tia'
  | 'prove'
  | 'xrp'
  | 'sei'
  | 'zro'
  | 'srusd'
  | 'wif'
  | 'kpepe'
  | 'doge'
  | 'kshib';

export const TokenIconMap: Record<
  SupportedTokenIcons,
  React.FunctionComponent<SVGProps<SVGSVGElement>>
> = {
  aave: AAVEIcon,
  ada: ADAIcon,
  aero: AEROIcon,
  ai16z: AI16ZIcon,
  aixbt: AIXBTIcon,
  ape: APEIcon,
  apt: APTIcon,
  arb: ArbIcon,
  aster: AsterIcon,
  atom: ATOMIcon,
  avax: AvaxIcon,
  bera: BERAIcon,
  bnb: BNBIcon,
  btc: BTCIcon,
  crv: CRVIcon,
  dai: DAIIcon,
  deusd: USDCIcon,
  doge: DOGEIcon,
  dot: DOTIcon,
  eigen: EigenIcon,
  ena: EthenaIcon,
  eth: ETHIcon,
  fartcoin: FARTCOINIcon,
  ftm: FantomIcon,
  goat: GOATIcon,
  grass: GRASSIcon,
  griffain: GRIFFAINIcon,
  hype: HypeIcon,
  inj: INJIcon,
  ip: IPIcon,
  jto: JTOIcon,
  jup: JUPIcon,
  kaito: KAITOIcon,
  kbonk: BonkIcon,

  kneiro: kNEIROIcon,
  kpepe: PEPEIcon,
  kshib: SHIBICON,
  layer: LAYERIcon,
  ldo: LDOIcon,
  linea: LineaIcon,
  link: LINKIcon,
  ltc: LTCIcon,
  matic: MATICIcon,
  me: MEIcon,
  mega: MEGAIcon,
  mkr: MKRIcon,
  morpho: MORPHOIcon,
  move: MOVEIcon,
  near: NearIcon,
  ondo: ONDOIcon,
  op: OpIcon,
  paxg: PAXGIcon,
  pendle: PendleIcon,
  pengu: PENGUIcon,
  pol: POLIcon,
  popcat: PopcatIcon,
  prove: ProveIcon,
  pump: PumpIcon,
  pyth: PYTHIcon,
  reth: RETHIcon,
  rusd: RUSDIcon,
  s: SonicIcon,
  sdeusd: USDCIcon,
  sei: SEIIcon,
  seth: SETHIcon,
  sol: SOLIcon,
  srusd: RUSDIcon,
  sui: SUIIcon,
  susde: USDEIcon,
  syrup: SYRUPIcon,
  tao: TAOIcon,
  tia: TIAIcon,
  ton: TONIcon,
  trump: TRUMPIcon,
  trx: TRXIcon,
  uni: UNIIcon,
  usdc: USDCIcon,
  'usdc.e': USDCIcon,
  usde: USDEIcon,
  usdt: USDTIcon,
  virtual: VirtualIcon,
  wbtc: WBTCIcon,
  weth: WETHIcon,
  wif: WIFIcon,
  wld: WLDIcon,
  wlfi: WLFIcon,
  wsteth: WSTETHIcon,
  xpl: XPLIcon,
  xrp: XRPIcon,
  yzy: YZYIcon,
  zora: ZORAIcon,
  zro: ZROIcon,
};

export const Icon: React.FunctionComponent<IconProps> = ({
  'data-testid': dataTestId,
  token,
  className,
  width = 32,
  height = 32,
}) => {
  const SupportedIcon = TokenIconMap[token.toLowerCase() as SupportedTokenIcons];
  if (!SupportedIcon) {
    return null;
  }
  return (
    <SupportedIcon
      className={className}
      data-testid={dataTestId || `Icon-${token}`}
      height={width}
      viewBox="0 0 32 32"
      width={height}
    />
  );
};