import { Meta } from '@storybook/react-webpack5';
import { ListItem, type ListItemProps } from '../../ListItem';
import { VariantStory } from './helpers';
import { withVariantConfig } from '../../../../.storybook/helpers';

export default {
  component: ListItem,
  title: 'Content/ListItem/Tests/variants/theme: dark',
  tags: ['!autodocs', '!manifest'],
  parameters: {
    controls: { disable: true },
    actions: { disable: true },
    knobs: { disable: true },
  },
} satisfies Meta<ListItemProps>;

const Default = {
  ...VariantStory,
  ...withVariantConfig(['dark'], VariantStory),
  args: { variant: 'dark' },
};

export const Button = {
  ...Default,
  args: { ...Default.args, controlType: 'button' },
};
export const ButtonAsLink = {
  ...Default,
  args: { ...Default.args, controlType: 'buttonAsLink' },
};
export const ButtonPartiallyInteractive = {
  ...Default,
  args: { ...Default.args, controlType: 'partialButton' },
};
export const ButtonAsLinkPartiallyInteractive = {
  ...Default,
  args: { ...Default.args, controlType: 'partialButtonAsLink' },
};
export const IconButton = {
  ...Default,
  args: { ...Default.args, controlType: 'iconButton' },
};
export const IconButtonAsLink = {
  ...Default,
  args: { ...Default.args, controlType: 'iconButtonAsLink' },
};
export const IconButtonWithLabel = {
  ...Default,
  args: { ...Default.args, controlType: 'iconButtonWithLabel' },
};
export const IconButtonAsLinkWithLabel = {
  ...Default,
  args: { ...Default.args, controlType: 'iconButtonAsLinkWithLabel' },
};
export const IconButtonPartiallyInteractive = {
  ...Default,
  args: { ...Default.args, controlType: 'partialIconButton' },
};
export const IconButtonAsLinkPartiallyInteractive = {
  ...Default,
  args: { ...Default.args, controlType: 'partialIconButtonAsLink', variant: 'dark' },
};
export const Navigation = { ...Default, args: { ...Default.args, controlType: 'navigation' } };
export const NavigationAsButton = {
  ...Default,
  args: { ...Default.args, controlType: 'navigationAsButton' },
};
export const Checkbox = { ...Default, args: { ...Default.args, controlType: 'checkbox' } };
export const Radio = { ...Default, args: { ...Default.args, controlType: 'radio' } };
export const Switch = { ...Default, args: { ...Default.args, controlType: 'switch' } };
export const NonInteractive = {
  ...Default,
  args: { ...Default.args, controlType: 'non-interactive' },
};