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

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" />
      </>
    );
  },
};

/** Badge types across default and dark themes to verify icon color visibility. */
export const BadgeVariants: Story = {
  render: function Render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          <AvatarView size={32} badge={{ type: 'action' }}>
            <Money />
          </AvatarView>
          <AvatarView size={48} badge={{ type: 'action' }}>
            <Money />
          </AvatarView>
          <AvatarView size={32} badge={{ type: 'action', icon: <Camera /> }}>
            <Money />
          </AvatarView>
          <AvatarView
            size={48}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'action', icon: <Camera /> }}
          />
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          <AvatarView size={32} badge={{ type: 'reference' }}>
            <Money />
          </AvatarView>
          <AvatarView size={48} badge={{ type: 'reference' }}>
            <Money />
          </AvatarView>
          <AvatarView size={32} badge={{ type: 'reference', icon: <Convert /> }}>
            <Money />
          </AvatarView>
          <AvatarView
            size={48}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'reference', icon: <Convert /> }}
          />
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          <AvatarView size={32} badge={{ icon: <FastFlag /> }}>
            <Money />
          </AvatarView>
          <AvatarView size={48} badge={{ icon: <FastFlag /> }}>
            <Money />
          </AvatarView>
          <AvatarView size={32} badge={{ status: 'warning' }}>
            <Money />
          </AvatarView>
          <AvatarView size={48} badge={{ status: 'negative' }}>
            <Money />
          </AvatarView>
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          <AvatarView
            size={32}
            imgSrc="../avatar-square-dude.webp"
            badge={{
              asset: (
                <div
                  className="d-flex align-items-center justify-content-center"
                  style={{
                    backgroundColor: 'var(--color-bright-pink)',
                    color: 'var(--color-dark-maroon)',
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <Leaf />
                </div>
              ),
            }}
          />
          <AvatarView
            size={48}
            imgSrc="../avatar-square-dude.webp"
            badge={{
              asset: (
                <div
                  className="d-flex align-items-center justify-content-center"
                  style={{
                    backgroundColor: 'var(--color-bright-pink)',
                    color: 'var(--color-dark-maroon)',
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <Leaf />
                </div>
              ),
            }}
          />
        </div>
      </div>
    );
  },
  ...withVariantConfig(['default', 'dark']),
};