import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Flag } from '@wise/art';
import { lorem10 } from '../../test-utils';
import { ListItem } from '../ListItem';
import List from '../../list';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_CONTROLS as CONTROLS,
} from '../_stories/subcomponents';
import { disableControls } from '../_stories/helpers';
import type { ListItemAvatarLayoutProps } from './ListItemAvatarLayout';

export default {
  component: ListItem.AvatarLayout,
  title: 'Content/ListItem/ListItem.AvatarLayout',
  args: {
    avatars: [{ asset: <Flag code="gb" /> }, { asset: <Flag code="eur" /> }],
    orientation: 'horizontal',
    size: 48,
  },
  argTypes: {
    avatars: {
      description: 'Array of avatar objects with asset and optional styling properties',
      table: {
        type: { summary: 'SingleAvatarType[]' },
      },
    },
    orientation: {
      control: 'inline-radio',
      options: ['horizontal', 'diagonal'],
      description: 'Layout orientation for multiple avatars',
    },
    size: {
      control: 'select',
      options: [24, 32, 40, 48, 56, 72],
      description: 'Size of the avatar layout',
    },
  },
} satisfies Meta<ListItemAvatarLayoutProps>;

type Story = StoryObj<ListItemAvatarLayoutProps>;

export const Playground: Story = {
  render: (args: ListItemAvatarLayoutProps) => {
    return (
      <List>
        <ListItem
          title="Transfer from GBP to EUR"
          subtitle="Currency exchange"
          media={<ListItem.AvatarLayout {...args} />}
          control={CONTROLS.iconButton}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};

/**
 * AvatarLayout supports two orientations: horizontal (default) and diagonal. <br />
 * Please refer to the [design documentation](https://wise.design/components/avatar#double) for more details.
 */
export const Orientations: Story = {
  argTypes: disableControls()(['orientation']),
  render: (args) => {
    return (
      <List>
        <ListItem
          title="Horizontal orientation"
          subtitle={lorem10}
          media={<ListItem.AvatarLayout {...args} orientation="horizontal" />}
          control={CONTROLS.iconButton}
        />

        <ListItem
          title="Diagonal orientation"
          subtitle={lorem10}
          media={<ListItem.AvatarLayout {...args} orientation="diagonal" />}
          control={CONTROLS.iconButton}
        />
      </List>
    );
  },
};

/**
 * AvatarLayout supports various sizes to fit different list item contexts.
 */
export const Sizes: Story = {
  parameters: {
    docs: {
      canvas: {
        sourceState: 'hidden',
      },
    },
  },
  argTypes: disableControls()(['size', 'orientation']),
  render: (args) => {
    const sizes = [24, 32, 40, 48, 56, 72] as const;
    const orientations = ['horizontal', 'diagonal'] as const;

    return (
      <List>
        {orientations.map((orientation) =>
          sizes.map((size) => (
            <ListItem
              key={`${orientation}-${size}`}
              title={`Size ${size}`}
              subtitle={lorem10}
              media={<ListItem.AvatarLayout {...args} size={size} orientation={orientation} />}
              control={CONTROLS.iconButton}
            />
          )),
        )}
      </List>
    );
  },
};