import { Meta, StoryObj } from '@storybook/react-webpack5';
import List from '../../../list';
import { ListItem, type ListItemProps } from '../../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_CONTROLS as CONTROLS,
  SB_LIST_ITEM_PROMPTS as PROMPT,
} from '../subcomponents';
import { VariantStory } from './helpers';

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

type Story = StoryObj<ListItemProps>;

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

export const ButtonControlLabel: Story = {
  render: () => (
    <List>
      <ListItem
        title="Fully interactive button."
        subtitle="It uses default content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.button}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        inverted
        title="Fully interactive button."
        subtitle="It uses inverted content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.button}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        title="Fully interactive button as HTML anchor."
        subtitle="It uses default content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.buttonAsLink}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        inverted
        title="Fully interactive button as HTML anchor."
        subtitle="It uses inverted content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.buttonAsLink}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        title="Partially interactive button."
        subtitle="It uses default content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.partialButton}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        inverted
        title="Partially interactive button."
        subtitle="It uses inverted content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.partialButton}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        title="Partially interactive button as HTML anchor."
        subtitle="It uses default content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.partialButtonAsLink}
        prompt={PROMPT.nonInteractive}
      />

      <ListItem
        inverted
        title="Partially interactive button as HTML anchor."
        subtitle="It uses inverted content hierarchy."
        valueTitle="100 GBP"
        valueSubtitle="200 USD"
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.partialButtonAsLink}
        prompt={PROMPT.nonInteractive}
      />
    </List>
  ),
};