/* eslint-disable react/jsx-key */
import { Meta, StoryObj } from '@storybook/react-webpack5';
import AvatarLayout, { AvatarLayoutProps } from '.';
import { Freeze } from '@transferwise/icons';
import { Flag } from '@wise/art';
import Body from '../body';
import SentimentSurface from '../sentimentSurface';

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

type Story = StoryObj<typeof AvatarLayout>;

const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];

export const Diagonal: Story = {
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'center',
        textAlign: 'center',
        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
      }}
    >
      {sizes.map((size) => (
        <Body type="body-large-bold">{size}</Body>
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          interactive
          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          interactive
          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="diagonal"
          avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
        />
      ))}
    </div>
  ),
};

export const Horizontal: Story = {
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'center',
        textAlign: 'center',
        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
      }}
    >
      {sizes.map((size) => (
        <Body type="body-large-bold">{size}</Body>
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          interactive
          avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          interactive
          avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          avatars={[{ asset: <Flag code="eu" /> }, { asset: <Flag code="eu" /> }]}
        />
      ))}

      {sizes.map((size) => (
        <AvatarLayout
          key={size}
          size={size}
          orientation="horizontal"
          avatars={[{ imgSrc: '../tapestry-01.png' }, { imgSrc: '../tapestry-01.png' }]}
        />
      ))}
    </div>
  ),
};

/**
 * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` 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: `interactive` are not supported.
 * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`.
 */
export const SentimentAwareness: Story = {
  parameters: {
    docs: {
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
  render: (args) => (
    <>
      {(['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)' }}
        >
          <AvatarLayout avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]} />
          <AvatarLayout
            orientation="diagonal"
            avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
          />
        </SentimentSurface>
      ))}
    </>
  ),
  decorators: [
    (Story: () => JSX.Element) => (
      <div
        style={{
          width: '100%',
          display: 'grid',
          gridTemplateColumns: 'min-content min-content',
          justifyContent: 'center',
          gap: '1rem',
          maxWidth: '800px',
        }}
      >
        <Story />
      </div>
    ),
  ],
};
