import React from 'react';
import doc from './doc.mdx?raw';
import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
import { Link } from '@digigov/ui/navigation/Link';
import { Heading } from '@digigov/ui/typography/Heading';
import { List, ListItem } from '@digigov/ui/content/List';

export default {
  title: 'Digigov UI/feedback/ErrorSummary',
  description:
    'Use this component at the top of a page to summarise any errors a user has made.',
  link: 'https://guide.services.gov.gr/docs/components/error-summary',
  component: ErrorSummary,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'ErrorSummary',
};

export const WithControls = {
  render: (args) => {
    return (
      <ErrorSummary dense={args.dense}>
        <Heading size="sm">{args.heading}</Heading>
        <List listStyle="none">
          {args.links.map((link, index) => (
            <ListItem key={index}>
              <Link href={link.href}>{link.label}</Link>
            </ListItem>
          ))}
        </List>
      </ErrorSummary>
    );
  },
  parameters: {
    controls: { exclude: ['variant', 'ref'] },
  },
  args: {
    dense: false,
    heading: 'Υπήρξε κάποιο πρόβλημα',
    links: [
      {
        href: '#',
        label: 'Πρέπει να συμπληρώσετε το έτος',
      },
      {
        href: '#',
        label: 'Πρέπει να συμπληρώσετε το μήνα',
      },
    ],
  },
  argTypes: {
    dense: {
      control: { type: 'boolean' },
    },
    heading: {
      control: { type: 'text' },
    },
    links: {
      control: { type: 'object' },
    },
  },
};

export { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
export { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';