import { Meta, StoryObj } from '@storybook/react';
import AvatarGroup, { AvatarGroupProps } from '.';
import { Bank, Briefcase } from '@transferwise/icons';
import Title from '../title';
import { Flag } from '@wise/art';
import { storyConfig } from '../test-utils';
import RadioOption from '../radioOption';

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

type Story = StoryObj<typeof AvatarGroup>;

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

export const Diagonal: Story = storyConfig(
  {
    render: () => (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
        }}
      >
        {sizes.map((size) => (
          <div key={size}>{size}</div>
        ))}

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

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

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="diagonal"
            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
          />
        ))}

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="diagonal"
            interactive
            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
          />
        ))}

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

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

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="diagonal"
            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
          />
        ))}

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="diagonal"
            interactive
            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
          />
        ))}
      </div>
    ),
  },
  { variants: ['light', 'dark'] },
);

export const Horizontal: Story = storyConfig(
  {
    render: () => (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
        }}
      >
        {sizes.map((size) => (
          <div key={size}>{size}</div>
        ))}

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

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

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="horizontal"
            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
          />
        ))}

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="horizontal"
            interactive
            avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
          />
        ))}

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

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

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="horizontal"
            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
          />
        ))}

        {sizes.map((size) => (
          <AvatarGroup
            key={size}
            size={size}
            orientation="horizontal"
            interactive
            avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
          />
        ))}
      </div>
    ),
  },
  { variants: ['light', 'dark'] },
);

export const Option: Story = storyConfig(
  {
    render: () => (
      <RadioOption
        id="test"
        name="foo"
        title="Personal account"
        showMediaCircle={false}
        media={
          <AvatarGroup
            size={48}
            orientation="diagonal"
            avatars={[{ asset: 'AA' }, { asset: 'BB' }]}
          />
        }
        onChange={() => {}}
      />
    ),
  },
  { variants: ['light', 'dark'] },
);

export const EdgeInstances: Story = storyConfig(
  {
    render: () => (
      <>
        <AvatarGroup
          size={72}
          orientation="horizontal"
          avatars={[
            { asset: <Flag code="br" /> },
            { asset: <Flag code="eu" /> },
            { asset: <Flag code="us" /> },
            { asset: '5+' },
          ]}
        />

        <br />

        <AvatarGroup
          size={72}
          orientation="horizontal"
          avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }, { asset: '9+' }]}
        />

        <br />

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

        <br />

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