import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import { lorem10 } from '../../test-utils';
import List from '../../list';
import { ListItem } from '../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_PROMPTS as PROMPTS,
  SB_LIST_ITEM_MEDIA as MEDIA,
} from '../_stories/subcomponents';
import type { ListItemNavigationProps } from './ListItemNavigation';

const meta: Meta<ListItemNavigationProps> = {
  component: ListItem.Navigation,
  title: 'Content/ListItem/ListItem.Navigation',
  args: {
    href: 'https://wise.com',
    onClick: fn(),
    target: undefined,
  },
  argTypes: {
    onClick: {
      description:
        'If `href` is falsy and `onClick` is set, the component will render as an HTML button.',
    },
    target: {
      control: 'select',
      options: [undefined, '_blank', '_self', '_parent', '_top'],
      description:
        'The `target` attribute for HTML anchor. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.',
    },
  },
} satisfies Meta<ListItemNavigationProps>;

export default meta;

type Story = StoryObj<ListItemNavigationProps>;

export const Playground: Story = {
  render: (args: ListItemNavigationProps) => {
    return (
      <List>
        <ListItem
          title="List item title"
          subtitle="Subtitle goes here"
          media={MEDIA.avatarSingle}
          control={<ListItem.Navigation {...args} />}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};

/**
 * Navigation control can be rendered as HTML anchor or a button
 */
export const AsButton: Story = {
  args: {
    onClick: fn(),
  },
  parameters: {
    controls: { disable: true },
  },
  render: (args) => {
    return (
      <List>
        <ListItem
          control={
            <ListItem.Navigation href="https://wise.com" target="_blank" onClick={args.onClick} />
          }
          title="Navigation as link"
          subtitle="This will navigate to an external URL"
          media={MEDIA.avatarSingle}
        />

        <ListItem
          control={<ListItem.Navigation onClick={args.onClick} />}
          title="Navigation as button"
          subtitle="This will trigger a click handler"
          media={MEDIA.avatarSingle}
        />
      </List>
    );
  },
};