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

import { Size } from '../common';

import Avatar, { AvatarType } from '.';
import { withVariantConfig } from '../../.storybook/helpers';

/**
 * @deprecated use **`AvatarView`** components instead
 */
export default {
  component: Avatar,
  title: 'Content/Avatar',
  tags: ['deprecated'],
} 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 = {
  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>
    );
  },
  ...withVariantConfig(['default', 'dark', 'rtl']),
};