import { type ElementType } from 'react';

import styled from 'styled-components';

import {
  AddressConnectorIcon,
  ArrowIcon,
  Bar3Icon,
  BellIcon,
  BellStrokeIcon,
  BoxCloseIcon,
  CalculatorIcon,
  CaretIcon,
  CautionCircleStrokeIcon,
  CautionCircleIcon,
  ChatIcon,
  CheckIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClockIcon,
  CloseIcon,
  CoinMarketCapIcon,
  CoinsIcon,
  CommentIcon,
  CopyIcon,
  CubeIcon,
  DiscordIcon,
  EtherscanIcon,
  DepthChartIcon,
  ExportKeysIcon,
  FeedbackIcon,
  FileIcon,
  FundingChartIcon,
  GearIcon,
  GiftboxIcon,
  HelpCircleIcon,
  HideIcon,
  HistoryIcon,
  LinkOutIcon,
  LockIcon,
  LogoShortIcon,
  MenuIcon,
  MintscanIcon,
  OrderbookIcon,
  OrderCanceledIcon,
  OrderFilledIcon,
  OrderOpenIcon,
  OrderPartiallyFilledIcon,
  OrderPendingIcon,
  OrderUntriggeredIcon,
  OverviewIcon,
  PencilIcon,
  PositionsIcon,
  PriceChartIcon,
  PrivacyIcon,
  QrIcon,
  SearchIcon,
  SendIcon,
  ShareIcon,
  ShowIcon,
  TogglesMenuIcon,
  StarIcon,
  TerminalIcon,
  TradeIcon,
  TransferIcon,
  TriangleIcon,
  TryAgainIcon,
  WarningIcon,
  WebsiteIcon,
  WhitepaperIcon,
} from '@/icons';

export enum IconName {
  AddressConnector = 'AddressConnector',
  Arrow = 'Arrow',
  Bar3 = 'Bar3',
  Bell = 'Bell',
  BellStroked = 'BellStroked',
  BoxClose = 'BoxClose',
  Calculator = 'Calculator',
  Caret = 'Caret',
  CautionCircle = 'CautionCircle',
  CautionCircleStroked = 'CautionCircleStroked',
  Chat = 'Chat',
  Check = 'Check',
  ChevronLeft = 'ChevronLeft',
  ChevronRight = 'ChevronRight',
  Clock = 'Clock',
  Close = 'Close',
  CoinMarketCap = 'CoinMarketCap',
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
  Cube = 'Cube',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
  Etherscan = 'Etherscan',
  ExportKeys = 'ExportKeys',
  Feedback = 'Feedback',
  File = 'File',
  FundingChart = 'FundingChart',
  Gear = 'Gear',
  Giftbox = 'Giftbox',
  HelpCircle = 'HelpCircle',
  Hide = 'Hide',
  History = 'History',
  LinkOut = 'LinkOut',
  Lock = 'Lock',
  LogoShort = 'LogoShort',
  Menu = 'Menu',
  Mintscan = 'Mintscan',
  Onboarding = 'Onboarding',
  Orderbook = 'OrderbookIcon',
  OrderCanceled = 'OrderCanceled',
  OrderFilled = 'OrderFilled',
  OrderOpen = 'OrderOpen',
  OrderPartiallyFilled = 'OrderPartiallyFilled',
  OrderPending = 'OrderPending',
  OrderUntriggered = 'OrderUntriggered',
  Overview = 'Overview',
  Pencil = 'Pencil',
  Positions = 'Positions',
  PriceChart = 'PriceChart',
  Privacy = 'Privacy',
  Qr = 'Qr',
  Search = 'Search',
  Send = 'Send',
  Share = 'Share',
  Show = 'Show',
  Star = 'Star',
  Terminal = 'Terminal',
  TogglesMenu = 'TogglesMenu',
  Trade = 'Trade',
  Transfer = 'Transfer',
  Triangle = 'Triangle',
  TryAgain = 'TryAgain',
  Warning = 'Warning',
  Website = 'Website',
  Whitepaper = 'Whitepaper',
}

const icons = {
  [IconName.AddressConnector]: AddressConnectorIcon,
  [IconName.Arrow]: ArrowIcon,
  [IconName.Bar3]: Bar3Icon,
  [IconName.Bell]: BellIcon,
  [IconName.BellStroked]: BellStrokeIcon,
  [IconName.BoxClose]: BoxCloseIcon,
  [IconName.Calculator]: CalculatorIcon,
  [IconName.Caret]: CaretIcon,
  [IconName.CautionCircle]: CautionCircleIcon,
  [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
  [IconName.Chat]: ChatIcon,
  [IconName.Check]: CheckIcon,
  [IconName.ChevronLeft]: ChevronLeftIcon,
  [IconName.ChevronRight]: ChevronRightIcon,
  [IconName.Clock]: ClockIcon,
  [IconName.Close]: CloseIcon,
  [IconName.CoinMarketCap]: CoinMarketCapIcon,
  [IconName.Coins]: CoinsIcon,
  [IconName.Comment]: CommentIcon,
  [IconName.Copy]: CopyIcon,
  [IconName.Cube]: CubeIcon,
  [IconName.DepthChart]: DepthChartIcon,
  [IconName.Discord]: DiscordIcon,
  [IconName.Etherscan]: EtherscanIcon,
  [IconName.ExportKeys]: ExportKeysIcon,
  [IconName.Feedback]: FeedbackIcon,
  [IconName.File]: FileIcon,
  [IconName.FundingChart]: FundingChartIcon,
  [IconName.Gear]: GearIcon,
  [IconName.Giftbox]: GiftboxIcon,
  [IconName.HelpCircle]: HelpCircleIcon,
  [IconName.Hide]: HideIcon,
  [IconName.History]: HistoryIcon,
  [IconName.LinkOut]: LinkOutIcon,
  [IconName.Lock]: LockIcon,
  [IconName.LogoShort]: LogoShortIcon,
  [IconName.Menu]: MenuIcon,
  [IconName.Mintscan]: MintscanIcon,
  [IconName.Orderbook]: OrderbookIcon,
  [IconName.OrderCanceled]: OrderCanceledIcon,
  [IconName.OrderFilled]: OrderFilledIcon,
  [IconName.OrderOpen]: OrderOpenIcon,
  [IconName.OrderPartiallyFilled]: OrderPartiallyFilledIcon,
  [IconName.OrderPending]: OrderPendingIcon,
  [IconName.OrderUntriggered]: OrderUntriggeredIcon,
  [IconName.Overview]: OverviewIcon,
  [IconName.Pencil]: PencilIcon,
  [IconName.Positions]: PositionsIcon,
  [IconName.PriceChart]: PriceChartIcon,
  [IconName.Privacy]: PrivacyIcon,
  [IconName.Qr]: QrIcon,
  [IconName.Search]: SearchIcon,
  [IconName.Send]: SendIcon,
  [IconName.Share]: ShareIcon,
  [IconName.Show]: ShowIcon,
  [IconName.Star]: StarIcon,
  [IconName.Terminal]: TerminalIcon,
  [IconName.TogglesMenu]: TogglesMenuIcon,
  [IconName.Trade]: TradeIcon,
  [IconName.Transfer]: TransferIcon,
  [IconName.Triangle]: TriangleIcon,
  [IconName.TryAgain]: TryAgainIcon,
  [IconName.Warning]: WarningIcon,
  [IconName.Website]: WebsiteIcon,
  [IconName.Whitepaper]: WhitepaperIcon,
} as Record<IconName, ElementType>;

type ElementProps = {
  iconName?: IconName;
  iconComponent?: ElementType;
};

type StyleProps = {
  className?: string;
};

export const Icon = styled(
  ({
    iconName,
    iconComponent: Component = iconName && icons[iconName],
    className,
    ...props
  }: ElementProps & StyleProps) =>
    Component ? <Component className={className} {...props} /> : null
)`
  width: 1em;
  height: 1em;
`;
