import { Meta, StoryObj } from '@storybook/react-webpack5';

import { ProfileType, Sentiment, Status } from '../common';

import AvatarWrapper from './AvatarWrapper';

/**
 * @deprecated use **`AvatarView`** components instead
 */
export default {
  component: AvatarWrapper,
  title: 'Content/AvatarWrapper',
  tags: ['deprecated'],
} satisfies Meta<typeof AvatarWrapper>;

type Story = StoryObj<typeof AvatarWrapper>;

export const All: Story = {
  args: {
    avatarProps: { outlined: true },
  },
  render: (args) => {
    const { avatarProps } = args;
    const badgeUrl = 'https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg';

    return (
      <div style={{ maxWidth: '300px', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div>
            <b>No Badges</b>
          </div>{' '}
          Personal
          <div>
            <AvatarWrapper profileType={ProfileType.PERSONAL} avatarProps={avatarProps} />
          </div>
          Business
          <div>
            <AvatarWrapper profileType={ProfileType.BUSINESS} avatarProps={avatarProps} />
          </div>
          Avatar
          <div>
            <AvatarWrapper
              url="https://wise.com/web-art/assets/flags/jpy.svg"
              aria-label="Japanese flag avatar"
              profileType={ProfileType.BUSINESS}
              avatarProps={avatarProps}
            />
          </div>
          Initials
          <div>
            <AvatarWrapper name="Any Aname" avatarProps={avatarProps} />
          </div>
          Default
          <div>
            <AvatarWrapper avatarProps={avatarProps} />
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div>
            <b>Badges</b>
          </div>
          Personal
          <div>
            <AvatarWrapper
              badgeUrl={badgeUrl}
              badgeAltText="wise fast flag badge"
              aria-label="Person avatar with wise fast flag badge"
              profileType={ProfileType.PERSONAL}
              avatarProps={avatarProps}
            />
          </div>
          Business
          <div>
            <AvatarWrapper
              badgeStatusIcon={Sentiment.POSITIVE}
              profileType={ProfileType.BUSINESS}
              avatarProps={avatarProps}
            />
          </div>
          Avatar
          <div>
            <AvatarWrapper
              badgeStatusIcon={Sentiment.NEGATIVE}
              url="https://wise.com/web-art/assets/flags/hrk.svg"
              profileType={ProfileType.BUSINESS}
              avatarProps={avatarProps}
            />
          </div>
          Initials
          <div>
            <AvatarWrapper
              badgeStatusIcon={Sentiment.NEUTRAL}
              name="A A"
              avatarProps={avatarProps}
            />
          </div>
          Default
          <div>
            <AvatarWrapper badgeStatusIcon={Status.PENDING} avatarProps={avatarProps} />
          </div>
        </div>
      </div>
    );
  },
};

export const ProfileBrokenImageFallback: Story = {
  parameters: {
    chromatic: {
      delay: 5000,
    },
  },
  render: () => {
    const assetUrl = 'https://test.com/img-wrong-url.test';
    return (
      <>
        <AvatarWrapper />
        <AvatarWrapper url={assetUrl} />
        <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} />
        <AvatarWrapper url={assetUrl} profileType={ProfileType.BUSINESS} name="Test Name" />
      </>
    );
  },
};