import React from 'react';
import doc from './doc.mdx?raw';
import {
  DateInputContainer,
  DateInputItem,
} from '@digigov/ui/form/DateInputContainer';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import { Hint } from '@digigov/ui/typography/Hint';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export default {
  title: 'Digigov UI/form/DateInputContainer',
  description:
    'Use the date input component to help users enter a memorable date or one they can easily look up.',
  link: 'https://guide.services.gov.gr/docs/components/date-input',
  component: DateInputContainer,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'DateInputContainer',
};

export const WithControls = {
  render: (args) => {
    return (
      <FieldContainer error={args.error}>
        <Fieldset aria-describedby={[`${args.hintId} ${args.errorId}`]}>
          <FieldsetLegend
            heading={args.singleQuestionInPage}
            size={args.singleQuestionInPage ? 'sm' : 'lg'}
          >
            {args.legend}
          </FieldsetLegend>
          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
          {args.error && (
            <ErrorMessage id={args.errorId}>
              <VisuallyHidden>Λάθος:</VisuallyHidden>
              {args.errorMessage}
            </ErrorMessage>
          )}
          <DateInputContainer aria-describedby={args.id} dense={args.dense}>
            <DateInputItem name="day">{args.day}</DateInputItem>
            <DateInputItem name="month">{args.month}</DateInputItem>
            <DateInputItem width={4} name="year" error={args.error}>
              {args.year}
            </DateInputItem>
          </DateInputContainer>
        </Fieldset>
      </FieldContainer>
    );
  },
  args: {
    singleQuestionInPage: true,
    legend: 'Πότε εκδόθηκε το διαβατήριό σας;',
    hint: true,
    hintMessage: 'Για παράδειγμα, 05 11 2020',
    hintId: 'passport-hint',
    day: 'Ημέρα',
    month: 'Μήνας',
    year: 'Έτος',
    error: false,
    errorMessage: 'Παρακαλώ εισάγετε μια έγκυρη ημερομηνία',
    errorId: 'passport-error',
    dense: false,
  },
  argTypes: {
    singleQuestionInPage: {
      control: { type: 'boolean' },
    },
    legend: {
      control: { type: 'text' },
    },
    hint: {
      control: { type: 'boolean' },
    },
    hintMessage: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    hintId: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    day: {
      control: { type: 'text' },
    },
    month: {
      control: { type: 'text' },
    },
    year: {
      control: { type: 'text' },
    },
    dense: {
      control: { type: 'boolean' },
    },
    error: {
      control: { type: 'boolean' },
    },
    errorMessage: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
    errorId: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
  },
};

export { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
export { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
export { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
export { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
export { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';