import { Meta, StoryObj } from '@storybook/react';
import * as wiseIcons from '@transferwise/icons';
import { Flag } from '@wise/art';

import { Size } from '../common';
import { storyConfig } from '../test-utils';

import Avatar, { AvatarType } from '.';

export default {
  component: Avatar,
  title: 'Content/Avatar',
  tags: ['autodocs'],
} satisfies Meta<typeof Avatar>;

type Story = StoryObj<typeof Avatar>;

export const Emoji: Story = {
  render: (args) => <Avatar {...args}>✈️</Avatar>,
  args: {
    type: AvatarType.EMOJI,
    size: Size.MEDIUM,
  },
};

export const FlagStory: Story = {
  name: 'Flag',
  render: (args) => (
    <Avatar {...args}>
      <Flag code="GBP" />
    </Avatar>
  ),
  args: {
    type: AvatarType.THUMBNAIL,
    size: Size.MEDIUM,
    outlined: true,
  },
};

export const Table: Story = storyConfig(
  {
    render: () => {
      const flagJPY = <Flag code="JPY" />;
      const flagGBP = <Flag code="GBP" />;
      const backgroundColor = '#d6f5e3';
      const emoji = '✈️';
      const initials = 'GN';
      const Icon = wiseIcons['Check'];

      return (
        <div>
          <table>
            Outlined
            <tr>
              <td>
                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
                  {flagJPY}
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
                  {flagJPY}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
                  {flagJPY}
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
                  {flagJPY}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
                  {flagJPY}
                </Avatar>
              </td>
            </tr>
            Image URL
            <tr>
              <td>
                <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
                  {flagGBP}
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.THUMBNAIL}>
                  {flagGBP}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
                  {flagGBP}
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.THUMBNAIL}>
                  {flagGBP}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
                  {flagGBP}
                </Avatar>
              </td>
            </tr>
            Emoji
            <tr>
              <td>
                <Avatar size={Size.LARGE} type={AvatarType.EMOJI}>
                  {emoji}
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.EMOJI}>
                  {emoji}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.MEDIUM} type={AvatarType.EMOJI}>
                  {emoji}
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.EMOJI}>
                  {emoji}
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.SMALL} type={AvatarType.EMOJI}>
                  {emoji}
                </Avatar>
              </td>
            </tr>
            <div style={{ paddingBottom: '20px' }}>
              <span style={{ position: 'absolute' }}>Custom background and icon</span>
            </div>
            <tr>
              <td>
                <Avatar size={Size.LARGE} type={AvatarType.ICON} backgroundColor={backgroundColor}>
                  <Icon size={24} />
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.ICON} backgroundColor={backgroundColor}>
                  <Icon size={24} />
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.MEDIUM} type={AvatarType.ICON} backgroundColor={backgroundColor}>
                  <Icon size={24} />
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.ICON} backgroundColor={backgroundColor}>
                  <Icon size={24} />
                </Avatar>
              </td>
              <td>
                <Avatar size={Size.SMALL} type={AvatarType.ICON} backgroundColor={backgroundColor}>
                  <Icon size={16} />
                </Avatar>
              </td>
            </tr>
            Initials
            <tr>
              <td>
                <Avatar size={72} type={AvatarType.INITIALS}>
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.INITIALS}>
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={48} type={AvatarType.INITIALS}>
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.INITIALS}>
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={24} type={AvatarType.INITIALS}>
                  {initials}
                </Avatar>
              </td>
            </tr>
            Branded
            <tr>
              <td>
                <Avatar size={72} type={AvatarType.INITIALS} backgroundColorSeed="1">
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={56} type={AvatarType.INITIALS} backgroundColorSeed="2">
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={48} type={AvatarType.INITIALS} backgroundColorSeed="3">
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={40} type={AvatarType.INITIALS} backgroundColorSeed="4">
                  {initials}
                </Avatar>
              </td>
              <td>
                <Avatar size={24} type={AvatarType.INITIALS} backgroundColorSeed="5">
                  {initials}
                </Avatar>
              </td>
            </tr>
          </table>
        </div>
      );
    },
  },
  { variants: ['default', 'dark', 'rtl'] },
);
