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

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

type Story = StoryObj<ListItemProps>;

const widths = [332, 333];

const sharedProps: Partial<ListItemProps> = {
  subtitle: TEXT.subtitle,
  valueTitle: TEXT.valueTitle,
  valueSubtitle: TEXT.valueSubtitle,
  additionalInfo: INFO.nonInteractive,
  control: CONTROLS.switch,
  prompt: PROMPT.interactive,
  media: MEDIA.avatarSingle,
};

export const SideMedia: Story = {
  render: () => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
        gap: 16,
      }}
    >
      {widths.map((w) => (
        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
          {w}px
        </div>
      ))}
      {widths.map((w) => (
        <div key={w} style={{ width: w }}>
          <List>
            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
            <ListItem {...sharedProps} title="No Spotlight" />
          </List>
        </div>
      ))}
    </div>
  ),
};