/* eslint-disable react/jsx-key */
import { Meta, StoryObj } from '@storybook/react-webpack5';
import AvatarLayout, { AvatarLayoutProps } from '.';
import { Freeze, Graph, Plane, Rewards } 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>
  ),
};

export const EdgeInstances: Story = {
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'space-between',
        gridTemplate: `auto auto / repeat(2, min-content)`,
      }}
    >
      <AvatarLayout orientation="diagonal" avatars={[]} />

      <AvatarLayout orientation="diagonal" avatars={[{}]} />

      <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />

      <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />

      <AvatarLayout
        orientation="diagonal"
        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }]}
      />

      <AvatarLayout
        orientation="horizontal"
        interactive
        avatars={[
          { imgSrc: '../avatar-squere-dude.webp' },
          { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
        ]}
      />

      <AvatarLayout
        orientation="horizontal"
        interactive
        avatars={[
          { imgSrc: '../avatar-square-dude.webp' },
          {
            asset: <Plane />,
            style: { backgroundColor: 'var(--color-bright-pink)' },
          },
        ]}
      />

      <AvatarLayout
        orientation="horizontal"
        interactive
        avatars={[
          {
            asset: <Graph />,
            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
          },
          {
            asset: <Rewards />,
            style: { color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' },
          },
        ]}
      />

      <AvatarLayout
        orientation="horizontal"
        interactive
        avatars={[
          { asset: <Flag code="gb" /> },
          { asset: '3+', style: { border: '1px dashed var(--color-border-neutral)' } },
        ]}
      />

      <AvatarLayout
        orientation="horizontal"
        avatars={[{ imgSrc: '../avatar-rectangle-fox.webp' }, { profileName: 'Jay Jay' }]}
      />

      <AvatarLayout
        interactive
        orientation="horizontal"
        avatars={[
          { imgSrc: '../avatar-rectangle-fox.webp' },
          { imgSrc: '../avatar-square-dude.webp' },
          { asset: '7+' },
        ]}
      />

      <AvatarLayout
        interactive
        orientation="horizontal"
        avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="br" /> }, { asset: '3+' }]}
      />

      <AvatarLayout
        orientation="horizontal"
        avatars={[
          { asset: <Flag code="gb" /> },
          { asset: <Flag code="br" /> },
          { asset: <Flag code="jp" /> },
          { asset: '3+' },
        ]}
      />
    </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>
    ),
  ],
};
