import { Meta, StoryObj } from '@storybook/react-webpack5';
import AvatarLayout from '.';
import { Freeze, Plane } from '@transferwise/icons';
import { Flag } from '@wise/art';

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

type Story = StoryObj<typeof AvatarLayout>;

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: <Freeze />,
            style: { color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' },
          },
          {
            asset: <Freeze />,
            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>
  ),
};