/* eslint-disable react/jsx-key */
import { Meta, StoryObj } from '@storybook/react-webpack5';
import {
  Camera,
  Convert,
  FastFlag,
  Freeze,
  Leaf,
  Plane,
  QrCode,
  Target,
  Team,
  Transport,
  Wallet,
  Water,
  Bank,
} from '@transferwise/icons';
import AvatarView, { AvatarViewProps } from '.';
import { Flag } from '@wise/art';
import { ProfileType } from '../common';
import Body from '../body';
import SentimentSurface from '../sentimentSurface';

export default {
  title: 'Content/AvatarView',
  component: AvatarView,
} satisfies Meta<typeof AvatarView>;

type Story = StoryObj<typeof AvatarView>;

const profileName1 = 'Wolter White';
const profileName2 = 'Tyler Durden';
const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];

const withComponentGrid = (Story: () => JSX.Element) => (
  <div
    style={{
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      gap: '1rem',
      maxWidth: '800px',
    }}
  >
    <Story />
  </div>
);

export const Selected: Story = {
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
        }}
      >
        {sizes.map((size) => (
          <Body type="body-large-bold">{size}</Body>
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size} selected interactive>
            <Freeze />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            selected
            interactive
          />
        ))}
      </div>
    );
  },
};

export const Badge: Story = {
  render: () => {
    const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
    const icons = [
      <Plane />,
      <QrCode />,
      <Target />,
      <Transport />,
      <Wallet />,
      <Water />,
      <Team />,
    ];
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size) => (
          <Body type="body-large-bold">{size}</Body>
        ))}
        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-rectangle-fox.webp"
            badge={{ imgSrc: '../tapestry-01.png' }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ imgSrc: '../tapestry-01.png' }}
          />
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ type: 'action' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'action', icon: <Camera /> }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'reference', icon: <Convert /> }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ icon: <Convert /> }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            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>
              ),
            }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'notification' }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'online' }}
          />
        ))}
      </div>
    );
  },
};

export const Notification: Story = {
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'space-between',
        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
      }}
    >
      {sizes.map((size) => (
        <Body type="body-large-bold">{size}</Body>
      ))}
      {sizes.map((size) => (
        <AvatarView key={size} size={size} badge={{ type: 'notification' }}>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView key={size} size={size} badge={{ type: 'notification' }} interactive>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView
          key={size}
          size={size}
          imgSrc="../avatar-rectangle-fox.webp"
          badge={{ type: 'notification' }}
          interactive
        />
      ))}
    </div>
  ),
};

export const Online: Story = {
  tags: ['new'],
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'space-between',
        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
      }}
    >
      {sizes.map((size) => (
        <Body type="body-large-bold">{size}</Body>
      ))}
      {sizes.map((size) => (
        <AvatarView key={size} size={size} badge={{ type: 'online' }}>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView key={size} size={size} badge={{ type: 'online' }} interactive>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView
          key={size}
          size={size}
          imgSrc="../avatar-rectangle-fox.webp"
          badge={{ type: 'online' }}
          interactive
        />
      ))}
    </div>
  ),
};

export const Images: Story = {
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size) => (
          <Body type="body-large-bold">{size}</Body>
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            interactive
            imgSrc="../avatar-square-dude.webp"
            profileName="Test Name"
            profileType={ProfileType.BUSINESS}
          />
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            profileName="Test Name"
            profileType={ProfileType.BUSINESS}
          />
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive>
            <Flag code="JPY" intrinsicSize={size} />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size}>
            <Flag code="JPY" intrinsicSize={size} />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} interactive imgSrc="../avatar-rectangle-fox.webp" size={size} />
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size} imgSrc="../avatar-rectangle-fox.webp" />
        ))}
      </div>
    );
  },
};

export const Profiles: Story = {
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size) => (
          <Body type="body-large-bold">{size}</Body>
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            profileName="Test Name"
            profileType={ProfileType.BUSINESS}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            interactive
            imgSrc="../avatar-square-dude.webp"
            profileName="Test Name"
            profileType={ProfileType.BUSINESS}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} profileName="Test Name" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive profileName="Test Name" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} profileType={ProfileType.BUSINESS} />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive profileType={ProfileType.BUSINESS} />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive />
        ))}
      </div>
    );
  },
};

/**
 * `AvatarView` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
 * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
 *
 * Features like `online`, `notification`, `selected`, and `interactive` are not supported.
 * For badge (`<AvatarView badge={}>`) only `flagCode` is supported.
 * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`.
 */
export const SentimentAwareness: Story = {
  parameters: {
    docs: {
      canvas: {
        sourceState: 'hidden',
      },
      source: { type: 'code' },
    },
  },
  render: () => {
    return (
      <>
        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
          (sentiment) => (
            <SentimentSurface
              key={`${sentiment}-base`}
              sentiment={sentiment}
              emphasis="base"
              className="p-a-1 d-flex"
              style={{ gap: 'var(--size-16)' }}
            >
              <AvatarView size={32}>
                <Bank />
              </AvatarView>
              <AvatarView size={32} profileName="John Doe" />
              <AvatarView size={32}>
                <Flag code="JPY" intrinsicSize={32} />
              </AvatarView>
              <AvatarView
                size={32}
                badge={sentiment === 'proposition' ? undefined : { status: sentiment }}
              >
                <Bank />
              </AvatarView>
              <AvatarView size={32} badge={{ flagCode: 'eu' }}>
                <Bank />
              </AvatarView>
            </SentimentSurface>
          ),
        )}
      </>
    );
  },
  decorators: [withComponentGrid],
};
