import 'core-js/modules/es.object.assign.js';
import { __rest } from '../../../_virtual/_tslib.js';
import { jsx } from 'react/jsx-runtime';
import { styled, css } from '@mui/material';
import img$f from '../../assets/icons/ASM AIFA All Stars.webp.js';
import img$e from '../../assets/icons/ASM AIFA Genesis.webp.js';
import img$d from '../../assets/icons/ASM Brains.webp.js';
import img$c from '../../assets/icons/ASM Gen II Brains.webp.js';
import img$g from '../../assets/icons/Asto.webp.js';
import img$b from '../../assets/icons/ATEM Car Club Membership Cards.webp.js';
import img$a from '../../assets/icons/ATEM On Track.webp.js';
import img$9 from '../../assets/icons/Burrows.webp.js';
import img$8 from '../../assets/icons/Buzzies.webp.js';
import { ReactComponent as SvgCoinBase } from '../../assets/icons/CoinBase.svg.js';
import { ReactComponent as SvgDrugReceiptsGenesisCollection } from '../../assets/icons/DrugReceiptsGenesisCollection.svg.js';
import { ReactComponent as SvgDRxGreetingCards } from '../../assets/icons/DRxGreetingCards.svg.js';
import { ReactComponent as SvgDRxKillTeamHalloween } from '../../assets/icons/DRxKillTeamHalloween.svg.js';
import { ReactComponent as SvgDRxKillTeamStabbiCollection } from '../../assets/icons/DRxKillTeamStabbiCollection.svg.js';
import { ReactComponent as SvgDRxTravelCo } from '../../assets/icons/DRxTravelCo.svg.js';
import img$7 from '../../assets/icons/EGGs.webp.js';
import { ReactComponent as SvgEthereum } from '../../assets/icons/Ethereum.svg.js';
import { ReactComponent as SvgEtherscan } from '../../assets/icons/Etherscan.svg.js';
import { ReactComponent as SvgFallback } from '../../assets/icons/Fallback.svg.js';
import { ReactComponent as SvgFluf } from '../../assets/icons/Fluf.svg.js';
import { ReactComponent as SvgFPassDark } from '../../assets/icons/FPassDark.svg.js';
import { ReactComponent as SvgFPassLight } from '../../assets/icons/FPassLight.svg.js';
import { ReactComponent as SvgFutureverse } from '../../assets/icons/Futureverse.svg.js';
import { ReactComponent as SvgGift } from '../../assets/icons/Gift.svg.js';
import { ReactComponent as SvgGoogle } from '../../assets/icons/Google.svg.js';
import { ReactComponent as SvgLooksRare } from '../../assets/icons/Looks Rare.svg.js';
import { ReactComponent as SvgMetaMask } from '../../assets/icons/MetaMask.svg.js';
import img$6 from '../../assets/icons/MNTGE Pass.webp.js';
import { ReactComponent as SvgMntgeBale } from '../../assets/icons/MNTGEBale.svg.js';
import { ReactComponent as SvgMntgeswGarmentOrInk } from '../../assets/icons/MNTGESWGarmentOrInk.svg.js';
import { ReactComponent as SvgMntgeswTrunks } from '../../assets/icons/MNTGESWTrunks.svg.js';
import { ReactComponent as SvgOpensea } from '../../assets/icons/Opensea.svg.js';
import img$5 from '../../assets/icons/PartyBears.webp.js';
import { ReactComponent as SvgRarible } from '../../assets/icons/Rarible.svg.js';
import img$4 from '../../assets/icons/Rayguns.webp.js';
import { ReactComponent as SvgRoot } from '../../assets/icons/Root.svg.js';
import img$3 from '../../assets/icons/Scenes and Sounds.webp.js';
import { ReactComponent as SvgSeeker } from '../../assets/icons/Seeker.svg.js';
import { ReactComponent as SvgSylo } from '../../assets/icons/SYLO.svg.js';
import img from '../../assets/icons/Thingies.webp.js';
import { ReactComponent as SvgThingiesArt } from '../../assets/icons/ThingiesArt.svg.js';
import img$2 from '../../assets/icons/TNL Bags.webp.js';
import img$1 from '../../assets/icons/TNL Boxers.webp.js';
import { ReactComponent as SvgTrophy } from '../../assets/icons/Trophy.svg.js';
import { ReactComponent as SvgUsdc } from '../../assets/icons/USDC.svg.js';
import { ReactComponent as SvgWalletConnect } from '../../assets/icons/WalletConnect.svg.js';
import { ReactComponent as SvgXrp } from '../../assets/icons/XRP.svg.js';
import { transientPropCheck } from '../../styles/theme/utils.js';

let _ = t => t,
  _t,
  _t2;
const IconWrapper = styled('div', transientPropCheck)(({
  $width,
  $color
}) => css(_t || (_t = _`
    width: ${0};
    min-width: ${0};
    display: flex;
    align-items: center;

    > svg,
    img {
      width: 100%;
      height: auto;
    }

    ${0}
  `), $width, $width, $color && css(_t2 || (_t2 = _`
      > svg {
        color: ${0};
      }
    `), $color)));
const Icon = ({
  name
}) => {
  switch (name) {
    case 'Metamask':
      return jsx(SvgMetaMask, {});
    case 'WalletConnect':
      return jsx(SvgWalletConnect, {});
    case 'Coinbase':
      return jsx(SvgCoinBase, {});
    case 'Google':
      return jsx(SvgGoogle, {});
    case 'SYLO':
      return jsx(SvgSylo, {});
    case 'ETH':
      return jsx(SvgEthereum, {
        color: "#000"
      });
    case 'Ethereum':
      return jsx(SvgEthereum, {
        color: "#687DE3"
      });
    case 'Fluf World':
      return jsx(SvgFluf, {});
    case 'Seekers':
      return jsx(SvgSeeker, {});
    case 'Root':
      return jsx(SvgRoot, {});
    case 'Rarible':
      return jsx(SvgRarible, {});
    case 'Opensea':
      return jsx(SvgOpensea, {});
    case 'LooksRare':
      return jsx(SvgLooksRare, {});
    case 'Etherscan':
      return jsx(SvgEtherscan, {});
    case 'FPassDark':
      return jsx(SvgFPassDark, {});
    case 'FPassLight':
      return jsx(SvgFPassLight, {});
    case 'FV':
      return jsx(SvgFutureverse, {});
    case 'XRP':
      return jsx(SvgXrp, {});
    case 'USDC':
      return jsx(SvgUsdc, {});
    case 'Trophy':
      return jsx(SvgTrophy, {});
    case 'Gift':
      return jsx(SvgGift, {});
    //**The those logos will need to be a PNG because of the nature of it's colour. It has gradients etc**
    //TODO: figure out how to add a common webpack config for Dashboard Next.js & UI-Library Storybook
    case 'ASTO':
      return jsx("img", {
        src: String(img$g.src || img$g),
        alt: "ASTO"
      });
    case 'AIFA Allstars':
      return jsx("img", {
        src: String(img$f.src || img$f),
        alt: "AIFA Allstars"
      });
    case 'ASM AIFA Genesis':
      return jsx("img", {
        src: String(img$e.src || img$e),
        alt: "ASM AIFA Genesis"
      });
    case 'ASM Brains':
      return jsx("img", {
        src: String(img$d.src || img$d),
        alt: "ASM Brains"
      });
    case 'ASM Gen II Brains':
      return jsx("img", {
        src: String(img$c.src || img$c),
        alt: "ASM Gen II Brains"
      });
    case 'ATEM Car Club Membership Cards':
      return jsx("img", {
        src: String(img$b.src || img$b),
        alt: "ATEM Car Club Membership Cards"
      });
    case 'ATEM On Track':
      return jsx("img", {
        src: String(img$a.src || img$a),
        alt: "ATEM On Track"
      });
    case 'Burrows':
      return jsx("img", {
        src: String(img$9.src || img$9),
        alt: "Burrows"
      });
    case 'Buzzies':
      return jsx("img", {
        src: String(img$8.src || img$8),
        alt: "Buzzies"
      });
    case 'EGGs':
      return jsx("img", {
        src: String(img$7.src || img$7),
        alt: "EGGs"
      });
    case 'MNTGE Pass':
      return jsx("img", {
        src: String(img$6.src || img$6),
        alt: "MNTGE Pass"
      });
    case 'Party Bears':
      return jsx("img", {
        src: String(img$5.src || img$5),
        alt: "Party Bears"
      });
    case 'Rayguns':
      return jsx("img", {
        src: String(img$4.src || img$4),
        alt: "Rayguns"
      });
    case 'Scenes and Sounds':
      return jsx("img", {
        src: String(img$3.src || img$3),
        alt: "Scenes and Sounds"
      });
    case 'The Next Legends Bags':
      return jsx("img", {
        src: String(img$2.src || img$2),
        alt: "The Next Legends Bags"
      });
    case 'The Next Legends Boxers':
      return jsx("img", {
        src: String(img$1.src || img$1),
        alt: "The Next Legends Boxers"
      });
    case 'Thingies':
      return jsx("img", {
        src: String(img.src || img),
        alt: "Thingies"
      });
    // TODO: Preferably, we'd cover all the possible argument cases
    case 'Drug Receipts: DRx Greeting Cards':
      return jsx(SvgDRxGreetingCards, {});
    case 'Drug Receipts: DRx Kill Team Capsules':
      return jsx(SvgDRxKillTeamHalloween, {});
    case 'Drug Receipts: DRx Kill Team Stabbi':
      return jsx(SvgDRxKillTeamStabbiCollection, {});
    case 'Drug Receipts: Genesis Collection':
      return jsx(SvgDrugReceiptsGenesisCollection, {});
    case 'Drug Receipts: Kill Team Collection':
      return jsx(SvgDRxKillTeamHalloween, {});
    case 'MNTGE Bales':
      return jsx(SvgMntgeBale, {});
    case 'MNTGE SW Garments':
      return jsx(SvgMntgeswGarmentOrInk, {});
    case 'MNTGE SW Inks':
      return jsx(SvgMntgeswGarmentOrInk, {});
    case 'MNTGE SW Trunks':
      return jsx(SvgMntgeswTrunks, {});
    case 'Thingies Art':
      return jsx(SvgThingiesArt, {});
    case 'Drug Receipts: DRx Travel Co.':
      return jsx(SvgDRxTravelCo, {});
    default:
      return jsx(SvgFallback, {});
  }
};
// IconFactory component can be used to centralise the way we import svg icons
//  and make easier to switch between icons just by changing the iconName property.
const IconFactory = _a => {
  var {
      name,
      color,
      width = '24px'
    } = _a,
    props = __rest(_a, ["name", "color", "width"]);
  return jsx(IconWrapper, Object.assign({
    "data-testid": `icon-${name}`,
    // eslint-disable-next-line jsx-a11y/aria-role -- TODO: Make sure this makes sense, maybe the rule is right?
    role: `icon-${name}`,
    "$width": typeof width === 'number' ? `${width}px` : width,
    "$color": color
  }, props, {
    children: jsx(Icon, {
      name: name
    })
  }));
};

export { IconFactory, IconFactory as default };
