import React from 'react';

import {
  DateInputContainer,
  DateInputItem,
} from '@digigov/ui/form/DateInputContainer';

import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';

import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const WithErrorMessageForSingleField = (_: any) => (
  <FieldContainer error>
    <Fieldset aria-describedby="passport-hint">
      <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο;</FieldsetLegend>
      <Hint id="passport-hint">Για παράδειγμα, 05 11 2020</Hint>
      <ErrorMessage id="passport-error">
        <VisuallyHidden>Λάθος:</VisuallyHidden> Η ημερομηνία έκδοσης του
        διαβατηρίου πρέπει να είναι στο παρελθόν.
      </ErrorMessage>
      <DateInputContainer aria-describedby="passport-error">
        <DateInputItem name="day">Ημέρα</DateInputItem>
        <DateInputItem name="month">Μήνας</DateInputItem>
        <DateInputItem error width={4} name="year" defaultValue={2043}>
          Έτος
        </DateInputItem>
      </DateInputContainer>
    </Fieldset>
  </FieldContainer>
);

export default WithErrorMessageForSingleField;