import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Graph, Money, PlusCircle, Rewards } from '@transferwise/icons';
import AvatarView from '.';
import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
import Display from '../display';

const meta: Meta<typeof AvatarView> = {
  component: AvatarView,
  tags: ['!autodocs', '!manifest'],
  title: 'Content/AvatarView/Tests',
};
export default meta;

type Story = StoryObj<typeof AvatarView>;

const profileName1 = 'Wolter White';
const profileName2 = 'Tyler Durden';

export const EdgeInstances: Story = {
  render: () => {
    const css = `.custom-variant {
      border: 1px dashed var(--color-border-neutral);
    }`;
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(2, min-content)',
        }}
      >
        <style>{css}</style>
        <AvatarView
          interactive
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: 'var(--color-bright-orange)' }}
        >
          <Money />
        </AvatarView>
        <AvatarView
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
        >
          <Money />
        </AvatarView>
        <AvatarView interactive className="custom-variant">
          <PlusCircle />
        </AvatarView>
        <AvatarView interactive className="custom-variant">
          {null}
        </AvatarView>
        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
          <Graph />
        </AvatarView>
        <AvatarView
          interactive
          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
        >
          <Graph />
        </AvatarView>
        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
          <Rewards />
        </AvatarView>
        <AvatarView
          interactive
          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
        >
          <Rewards />
        </AvatarView>
        <AvatarView
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
        >
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView
          interactive
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
        >
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView>9+</AvatarView>
        <AvatarView interactive>5+</AvatarView>
      </div>
    );
  },
};

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