import React, { SVGProps } from 'react';

import { ReactComponent as AAveIcon } from './assets/aave.svg';
import { ReactComponent as ArbIcon } from './assets/arb.svg';
import { ReactComponent as AvaxIcon } from './assets/avax.svg';
import { ReactComponent as CompoundIcon } from './assets/compound.svg';
import { ReactComponent as CRVIcon } from './assets/crv.svg';
import { ReactComponent as GlpIcon } from './assets/glp.svg';
import { ReactComponent as LidoIcon } from './assets/lido.svg';
import { ReactComponent as LINKIcon } from './assets/link.svg';
import { ReactComponent as MKRIcon } from './assets/mkr.svg';
import { ReactComponent as OpIcon } from './assets/op.svg';
import { ReactComponent as RocketIcon } from './assets/rocket.svg';
import { ReactComponent as SEIIcon } from './assets/SEI.svg';
import { ReactComponent as SOFRIcon } from './assets/sofr.svg';
import { ReactComponent as SOLIcon } from './assets/sol.svg';
import { ReactComponent as SUIIcon } from './assets/SUI.svg';
import { ReactComponent as TIAIcon } from './assets/TIA.svg';
import { ReactComponent as UNIIcon } from './assets/uni.svg';
import { ReactComponent as USDEIcon } from './assets/usde.svg';
import { ReactComponent as XRPIcon } from './assets/XRP.svg';
import { ReactComponent as ZROIcon } from './assets/ZRO.svg';

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

export type SupportedMarkets =
  | 'arb'
  | 'avax'
  | 'op'
  | 'aave'
  | 'compound'
  | 'crv'
  | 'glp'
  | 'sofr'
  | 'lido'
  | 'link'
  | 'mkr'
  | 'rocket'
  | 'sol'
  | 'uni'
  | 'usde'
  | 'sui'
  | 'tia'
  | 'xrp'
  | 'sei'
  | 'zro';

export const MarketIconMap: Record<
  SupportedMarkets,
  React.FunctionComponent<SVGProps<SVGSVGElement>>
> = {
  aave: AAveIcon,
  arb: ArbIcon,
  avax: AvaxIcon,
  compound: CompoundIcon,
  crv: CRVIcon,
  glp: GlpIcon,
  lido: LidoIcon,
  link: LINKIcon,
  mkr: MKRIcon,
  op: OpIcon,
  rocket: RocketIcon,
  sei: SEIIcon,
  sofr: SOFRIcon,
  sol: SOLIcon,
  sui: SUIIcon,
  tia: TIAIcon,
  uni: UNIIcon,
  usde: USDEIcon,
  xrp: XRPIcon,
  zro: ZROIcon,
};

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