import { 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_MEDIA as MEDIA,
  SB_LIST_ITEM_PROMPTS as PROMPT,
  SB_LIST_ITEM_TEXT as TEXT,
  SB_ListItem_ControlType as ControlType,
} from '../subcomponents';

type VariantPartial = { title: string } & Partial<ListItemProps>;
type Variant = 'default' | 'dark' | 'rtl' | 'forest-green' | 'bright-green' | 'mobile' | '400%';

const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
  TEXT;
const prompt = PROMPT.nonInteractive;
const media = MEDIA.avatarSingle;

type VariantStoryProps = {
  controlType: ControlType;
  variant?: Variant;
};

type VariantStory = StoryObj<VariantStoryProps>;

export const VariantStory: VariantStory = {
  render: ({ controlType, variant = 'default' }) => {
    const control = CONTROLS[controlType];
    const isInteractive = [
      'partialButton',
      'partialButtonAsLink',
      'partialIconButton',
      'partialIconButtonAsLink',
    ].includes(controlType);
    const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
    const instances = [
      { title },
      { title: longTitle },
      { title, valueTitle },
      { title, valueTitle: longValueTitle },
      { title: longTitle, valueTitle },
      { title, subtitle },
      { title, subtitle: longSubtitle },
      { title, additionalInfo },
      { title, valueTitle, valueSubtitle },
      { title, valueTitle: longValueTitle, valueSubtitle },
      { title, subtitle, inverted: true },
      { title, subtitle, valueTitle },
      { title, subtitle, valueTitle, inverted: true },
      { title, subtitle, valueTitle, valueSubtitle },
      {
        title: longTitle,
        subtitle: longSubtitle,
        valueTitle,
        valueSubtitle,
        additionalInfo: INFO.nonInteractive,
      },
      { title, subtitle, valueTitle, valueSubtitle, inverted: true },
      { media, title },
      { media, title: longTitle },
      { media, title, valueTitle },
      { media, title: longTitle, valueTitle },
      { media, title: longTitle, valueSubtitle },
      { media, title, valueTitle: longValueTitle },
      { media, title, valueTitle: longValueTitle, valueSubtitle },
      { media, title, subtitle },
      { media, title: longTitle, subtitle },
      { media, title, valueTitle, valueSubtitle },
      { media, title, valueTitle },
      { media, title, valueSubtitle },
      { media, title, subtitle },
      { media, title, additionalInfo },
      { media, title, subtitle, valueTitle },
      { media, title, subtitle, valueTitle, valueSubtitle },
      { media, title, subtitle, additionalInfo: INFO.nonInteractive },
      isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
      { media, title, subtitle, additionalInfo, valueTitle },
      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
      {
        media,
        title: longTitle,
        subtitle: longSubtitle,
        valueTitle,
        valueSubtitle,
        additionalInfo: INFO.nonInteractive,
      },
      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
      {
        media,
        title,
        subtitle,
        additionalInfo,
        valueTitle,
        valueSubtitle,
        prompt: PROMPT.interactive,
      },
      {
        media,
        title,
        subtitle,
        additionalInfo,
        valueTitle,
        valueSubtitle,
        prompt: PROMPT.interactive,
        inverted: true,
      },
      {
        media,
        title,
        subtitle,
        additionalInfo,
        valueTitle,
        valueSubtitle,
        prompt: PROMPT.interactive,
        spotlight: 'active',
      },
      {
        media,
        title,
        subtitle,
        additionalInfo,
        valueTitle,
        valueSubtitle,
        prompt: PROMPT.interactive,
        spotlight: 'inactive',
      },
      {
        media,
        title,
        subtitle,
        additionalInfo,
        valueTitle,
        valueSubtitle,
        prompt: PROMPT.interactive,
        spotlight: 'inactive',
        disabled: true,
      },
    ].filter(Boolean) as VariantPartial[];

    return (
      <List>
        {instances.map((instance) => (
          <ListItem
            key={`${variant}-${controlType}-${JSON.stringify(instance)}`}
            control={control}
            {...instance}
          />
        ))}
      </List>
    );
  },
  parameters: {
    variants: ['default'],
  },
};