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

const meta: Meta<ListItemSwitchProps> = {
  component: ListItem.Switch,
  title: 'Content/ListItem/ListItem.Switch',
  args: {
    checked: false,
    onClick: fn(),
  },
  argTypes: {
    checked: {
      control: 'boolean',
    },
    onClick: {
      table: {
        type: { summary: '(event?: MouseEvent<HTMLButtonElement>) => void' },
      },
    },
  },
} satisfies Meta<ListItemSwitchProps>;

export default meta;

type Story = StoryObj<ListItemSwitchProps>;

export const Playground: Story = {
  render: (args: ListItemSwitchProps) => {
    return (
      <List>
        <ListItem
          title="List item with switch"
          subtitle="Toggle this setting"
          media={MEDIA.avatarSingle}
          control={<ListItem.Switch {...args} />}
          additionalInfo={INFO.nonInteractive}
        />
      </List>
    );
  },
};

export const States: Story = {
  parameters: {
    controls: { disable: true },
  },
  render: (args) => {
    return (
      <List>
        <ListItem
          title={lorem5}
          subtitle={lorem10}
          media={MEDIA.avatarSingle}
          control={<ListItem.Switch {...args} checked />}
        />
        <ListItem
          key={lorem5}
          title={lorem10}
          media={MEDIA.avatarSingle}
          control={<ListItem.Switch {...args} />}
        />
      </List>
    );
  },
};