import React from 'react';
import doc from './doc.mdx?raw';
import { List } from '@digigov/ui/content/List/List';
import { ListItem } from '@digigov/ui/content/List/ListItem';

export default {
  title: 'Digigov UI/content/List',
  description:
    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',
  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',
  component: List,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'List',
};

export const WithControls = {
  render: (args) => {
    return (
      <List listStyle={args.listStyle} dense={args.dense} layout={args.layout}>
        {args.listItems.map((item, index) => (
          <ListItem key={index}>{item}</ListItem>
        ))}
      </List>
    );
  },
  args: {
    listStyle: 'none',
    layout: 'vertical',
    dense: false,
    listItems: [
      'Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων',
      'Πτυχία τριτοβάθμιας εκπαίδευσης',
      'Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής',
    ],
  },
  argTypes: {
    listStyle: {
      options: ['none', 'bullet', 'number'],
      control: { type: 'select' },
    },
    layout: {
      options: ['vertical', 'horizontal'],
      control: { type: 'select' },
    },
    dense: {
      control: { type: 'boolean' },
    },
    listItems: {
      control: { type: 'object' },
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};

export { Default } from '@digigov/ui/content/List/__stories__/Default';
export { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';
export { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';
export { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';
export { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';
export { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';