import { type Meta, type StoryObj } from '@storybook/react';

import AdaptiveTextList from './index';

export default {
  title: 'Composed Components/AdaptiveTextList',
  component: AdaptiveTextList,
  args: {
    items: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig'],
    actualCount: 6,
    getAndText: (left: string, right: string) => `${left} and ${right}`,
    getMoreText: (count: number) => `${count} more`,
  },
} as Meta<typeof AdaptiveTextList>;

export const Default: StoryObj<typeof AdaptiveTextList> = {};

export const OneItem: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: ['OnlyOne'],
    actualCount: 1,
  },
};

export const TwoItems: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: ['Alpha', 'Beta'],
    actualCount: 2,
  },
};

export const WithMoreCountThanLoaded: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: ['Alpha', 'Beta', 'Gamma'],
    actualCount: 7,
  },
};

export const CustomAndAndMoreText: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: ['Red', 'Blue', 'Green'],
    actualCount: 5,
    getAndText: (left, right) => `${left} & ${right}`,
    getMoreText: count => `plus ${count} extras`,
  },
};

export const EmptyList: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: [],
    actualCount: 0,
  },
};

export const ManyItemsNarrow: StoryObj<typeof AdaptiveTextList> = {
  args: {
    items: [
      'Item one',
      'Item two with longer name',
      'Short',
      'Another item',
      'Fifth item',
      'And more',
    ],
    actualCount: 8,
  },
  parameters: {
    viewport: {
      defaultViewport: 'mobile1',
    },
  },
};
