import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import { action } from 'storybook/actions';
import { lorem20 } from '../../test-utils';
import List from '../../list';
import { ListItem } from '../ListItem';
import {
  SB_LIST_ITEM_CONTROLS as CONTROLS,
  SB_LIST_ITEM_MEDIA as MEDIA,
} from '../_stories/subcomponents';
import { disableControls } from '../_stories/helpers';
import type { ListItemAdditionalInfoProps } from './ListItemAdditionalInfo';

/**
 * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
 *
 * Refer to the [design documentation](https://wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
 */
export default {
  component: ListItem.AdditionalInfo,
  title: 'Content/ListItem/ListItem.AdditionalInfo',
  args: {
    children: lorem20,
  },
  argTypes: {
    children: {
      table: {
        type: { summary: 'ReactNode' },
      },
    },
    action: {
      table: {
        type: { summary: `{ label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>` },
      },
    },
  },
} satisfies Meta<ListItemAdditionalInfoProps>;

type Story = StoryObj<ListItemAdditionalInfoProps>;

/**
 * Convenience controls for previewing rich markup,
 * not otherwise possible via Storybook
 */
type PreviewStoryArgs = ListItemAdditionalInfoProps & {
  previewAction?: string | ListItemAdditionalInfoProps['action'];
};

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

const previewArgTypes = {
  previewAction: {
    name: 'Preview `action`',
    control: 'radio',
    options: ['unset (undefined)', 'link', 'button'],
    mapping: {
      'unset (undefined)': undefined,
      link: {
        label: 'Details about the subject.',
        href: 'https://wise.com',
        target: '_blank',
      },
      button: {
        label: 'Details about the subject.',
        onClick: fn(),
      },
    },
    table: previewArgGroup,
  },
} as const;

export const Playground: StoryObj<PreviewStoryArgs> = {
  argTypes: previewArgTypes,
  args: {
    children: lorem20,
    previewAction: 'link',
  },
  render: (args: PreviewStoryArgs) => {
    const { previewAction, ...props } = args as {
      previewAction: ListItemAdditionalInfoProps['action'];
      props: ListItemAdditionalInfoProps;
    };

    return (
      <List>
        <ListItem
          title="List item title"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={CONTROLS.partialButton}
          additionalInfo={<ListItem.AdditionalInfo {...props} action={previewAction} />}
        />
      </List>
    );
  },
};

/**
 * Fully interactive ListItems do not allow for any nested links or inline buttons as that would fail accessibility compliance.
 *
 * Non-interactive or partially-interactive ListItems allow appending a single link or inline button via `action` prop. The restriction has been introduced to ensure that the ListItem remains accessible and adheres to the vendors' best practices for mobile platforms.
 */
export const Interactivity: Story = {
  args: {
    action: {
      label: 'Details about the subject.',
      href: 'https://wise.com',
      target: '_blank',
    },
  },
  argTypes: disableControls()(['action']),
  render: (args: ListItemAdditionalInfoProps) => {
    return (
      <List>
        <ListItem
          title="Fully interactive ListItem"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={CONTROLS.button}
          additionalInfo={<ListItem.AdditionalInfo {...args} action={undefined} />}
        />

        <ListItem
          title="Partially interactive ListItem"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={CONTROLS.partialButton}
          additionalInfo={<ListItem.AdditionalInfo {...args} />}
        />

        <ListItem
          title="Non-interactive ListItem"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          additionalInfo={<ListItem.AdditionalInfo {...args} />}
        />
      </List>
    );
  },
};

/**
 * Interactive `ListItem.AdditionalInfo` allows for 2 types of actions: a link or a button.
 */
export const Actions: Story = {
  argTypes: disableControls()(['action']),
  render: (args: ListItemAdditionalInfoProps) => {
    return (
      <List>
        <ListItem
          title="Partially interactive ListItem"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={CONTROLS.partialButton}
          additionalInfo={
            <ListItem.AdditionalInfo
              {...args}
              action={{
                label: 'I am a link.',
                href: 'https://wise.com',
                target: '_blank',
              }}
            />
          }
        />

        <ListItem
          title="Partially interactive ListItem"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={CONTROLS.partialButton}
          additionalInfo={
            <ListItem.AdditionalInfo
              {...args}
              action={{
                label: 'I am a button.',
                onClick: () => {
                  action('Button clicked')();
                },
              }}
            />
          }
        />
      </List>
    );
  },
};