import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';

import { shouldNotForwardProps } from '../../../utils/should-not-forward-props';
import { Typography } from '../../Typography';
import { TokenIcon } from '.';
import { TokenIconMap } from './Icon';

export default {
  args: {},
  component: TokenIcon,
  title: 'Components/Icons/TokenIcon',
} as Meta<typeof TokenIcon>;

export const BTC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'btc',
  },
};
export const DAI: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'dai',
  },
};
export const ETH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'eth',
  },
};

export const MATIC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'matic',
  },
};

export const RETH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'reth',
  },
};

export const RUSD: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'rusd',
  },
};

export const SETH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'seth',
  },
};

export const SOL: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'sol',
  },
};

export const USDC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'usdc',
  },
};

export const USDCE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'usdc.e',
  },
};

export const USDE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'usde',
  },
};

export const SUSDE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'susde',
  },
};

export const USDT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'usdt',
  },
};

export const WBTC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'wbtc',
  },
};

export const WETH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'weth',
  },
};

export const ARB: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'arb',
  },
};

export const AVAX: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'avax',
  },
};

export const OP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'op',
  },
};

export const AAVE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'aave',
  },
};

export const LINK: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'link',
  },
};

export const MKR: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'mkr',
  },
};

export const UNI: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'uni',
  },
};

export const CRV: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'crv',
  },
};

export const PEPE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'kpepe',
  },
};

export const WIF: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'wif',
  },
};

export const KSHIB: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'kshib',
  },
};

export const DOGE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'doge',
  },
};

export const BONK: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'kbonk',
  },
};

export const POPCAT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'popcat',
  },
};

export const DEUSD: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'deusd',
  },
};

export const JTO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'jto',
  },
};

export const BNB: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'bnb',
  },
};

export const APT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'apt',
  },
};

export const SDEUSD: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'sdeusd',
  },
};

export const LDO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ldo',
  },
};

export const POL: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'pol',
  },
};

export const ADA: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ada',
  },
};

export const FANTOM: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ftm',
  },
};

export const NEAR: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'near',
  },
};

export const PENDLE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'pendle',
  },
};

export const ETHENA: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ena',
  },
};

export const EIGEN: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'eigen',
  },
};

export const KNEIRO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'kneiro',
  },
};

export const GRASS: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'grass',
  },
};

export const GOAT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'goat',
  },
};

export const JUP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'jup',
  },
};

export const LTC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ltc',
  },
};

export const PENGU: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'pengu',
  },
};

export const PYTH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'pyth',
  },
};

export const DOT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'dot',
  },
};

export const TRUMP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'trump',
  },
};

export const SONIC: StoryObj<typeof TokenIcon> = {
  args: {
    token: 's',
  },
};

export const VIRTUAL: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'virtual',
  },
};

export const AIXBT: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'aixbt',
  },
};

export const AI16Z: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ai16z',
  },
};

export const HYPE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'hype',
  },
};

export const FARTCOIN: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'fartcoin',
  },
};

// Create stories for the new icons
export const TON: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ton',
  },
};

export const TRX: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'trx',
  },
};

export const WLD: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'wld',
  },
};

export const ATOM: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'atom',
  },
};

export const MOVE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'move',
  },
};

export const INJ: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'inj',
  },
};

export const GRIFFAIN: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'griffain',
  },
};

export const ONDO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ondo',
  },
};

export const APE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ape',
  },
};

export const ME: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'me',
  },
};

export const TAO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'tao',
  },
};

export const IP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'ip',
  },
};

export const LAYER: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'layer',
  },
};

export const BERA: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'bera',
  },
};

export const WSTETH: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'wsteth',
  },
};

export const PAXG: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'paxg',
  },
};

export const PROVE: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'prove',
  },
};

export const Linea: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'linea',
  },
};

export const XPL: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'xpl',
  },
};

export const WLFI: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'wlfi',
  },
};

export const PUMP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'pump',
  },
};

export const ASTER: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'aster',
  },
};

export const YZY: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'yzy',
  },
};

export const AERO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'aero',
  },
};

export const SYRUP: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'syrup',
  },
};

export const ZORA: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'zora',
  },
};

export const MORPHO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'morpho',
  },
};

export const KAITO: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'kaito',
  },
};

export const MEGA: StoryObj<typeof TokenIcon> = {
  args: {
    token: 'mega',
  },
};

const Wrapper = styled.div`
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
`;

const IconBox = styled.div`
  align-items: center;
  border: 1px solid ${({ theme }) => theme.colors.black100};
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: ${({ theme }) => theme.colors.black500};
`;

export const AllIcons: StoryObj<typeof TokenIcon> = {
  args: {},
  render: (args) => (
    <Wrapper>
      {Object.keys(TokenIconMap).map((token) => (
        <IconBox key={token}>
          <TokenIcon {...args} token={token} />
          <Typography colorToken="white100" typographyToken="bodyXSmallMedium">
            {token}
          </Typography>
        </IconBox>
      ))}
    </Wrapper>
  ),
};

const SizeWrapper = styled('div', shouldNotForwardProps(['size']))<{ size: number }>`
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;
  border: 1px solid ${({ theme }) => theme.colors.black100};
`;

export const WithSize: StoryObj<typeof TokenIcon> = {
  args: {
    size: 50,
    token: 'eth',
  },
  render: (args) => (
    <SizeWrapper size={args.size || 50}>
      <TokenIcon {...args} />
    </SizeWrapper>
  ),
};