import React from 'react';
import doc from './doc.mdx?raw';
import ErrorMessage from '@digigov/ui/form/ErrorMessage';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export default {
  title: 'Digigov UI/form/ErrorMessage',
  description:
    'Show an error message next to the field and in the error summary when there is a validation error.',
  link: 'https://guide.services.gov.gr/docs/components/error-message',
  component: ErrorMessage,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'ErrorMessage',
};

export const WithControls = {
  render: (args) => {
    return (
      <ErrorMessage id={args.id}>
        <VisuallyHidden>{args.visuallyHiddenMessage}</VisuallyHidden>
        {args.errorMessage}
      </ErrorMessage>
    );
  },
  args: {
    id: 'date-of-birth-error',
    errorMessage: 'H ημερομηνία γέννησης πρέπει να είναι στο παρελθόν.',
    visuallyHiddenMessage: 'Λάθος:',
  },
  argTypes: {
    id: {
      control: { type: 'text' },
    },
    errorMessage: {
      control: { type: 'text' },
    },
    visuallyHiddenMessage: {
      control: { type: 'text' },
    },
  },
};
export { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';
export { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';
export { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';