import { Meta, StoryObj } from '@storybook/react-webpack5';
import List from '../../list';
import { ListItem } from '../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_CONTROLS as CONTROLS,
} from '../_stories/subcomponents';
import landscapeImage from '../../test-utils/assets/placeholder-landscape.svg';
import portraitImage from '../../test-utils/assets/placeholder-portrait.svg';
import type { ListItemImageProps } from './ListItemImage';

export default {
  component: ListItem.Image,
  title: 'Content/ListItem/ListItem.Image',
  args: {
    size: 48,
    loading: undefined,
    alt: undefined,
  },
} satisfies Meta<ListItemImageProps>;

/**
 * Convenience controls for previewing rich markup,
 * not otherwise possible via Storybook
 */
type PreviewStoryArgs = ListItemImageProps & {
  previewOrientation?: ListItemImageProps['src'];
};

const previewArgGroup = {
  category: 'Preview options',
  type: {
    summary: undefined,
  },
};

const previewArgTypes = {
  previewOrientation: {
    name: 'Preview image with orientation',
    control: 'radio',
    options: ['unset (use `src` prop)', 'landscape', 'portrait'],
    mapping: {
      'unset (use `src` prop)': undefined,
      landscape: landscapeImage,
      portrait: portraitImage,
    },
    table: previewArgGroup,
  },
} as const;

export const Playground: StoryObj<PreviewStoryArgs> = {
  argTypes: previewArgTypes,
  args: {
    src: 'https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg',
  },
  render: (args: PreviewStoryArgs) => {
    const { previewOrientation, src, ...imageProps } = args as {
      previewOrientation: string;
      src: PreviewStoryArgs['src'];
      props: PreviewStoryArgs;
    };

    return (
      <List>
        <ListItem
          title="List item title"
          subtitle="Subtitle goes here"
          media={<ListItem.Image {...imageProps} src={previewOrientation || src} />}
          control={CONTROLS.partialButton}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};