import React from 'react';
import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
import Button from '@digigov/ui/form/Button';
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 { BackLink } from '@digigov/ui/navigation/BackLink';
import { Link } from '@digigov/ui/navigation/Link';
import { Heading } from '@digigov/ui/typography/Heading';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const WithBackLinkAndButton = (_: any) => (
  <div>
    <BackLink href="/">Πίσω</BackLink>
    <ErrorSummary>
      <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
      <Link href="#passport-date">Πρέπει να συμπληρώσετε το έτος</Link>
    </ErrorSummary>
    <FieldContainer error id="passport-date">
      <Fieldset>
        <FieldsetLegend>Ποιά είναι η ημερομηνία γέννησής σας</FieldsetLegend>
        <Hint>Για παράδειγμα, 05 11 2020</Hint>
        <ErrorMessage>
          <VisuallyHidden>Λάθος:</VisuallyHidden>Η ημερομηνία γέννησης πρέπει να
          έχει έτος.
        </ErrorMessage>
        <DateInputContainer>
          <DateInputItem name="day">Ημέρα</DateInputItem>
          <DateInputItem name="month">Μήνας</DateInputItem>
          <DateInputItem error width={4} name="year">
            Έτος
          </DateInputItem>
        </DateInputContainer>
      </Fieldset>
    </FieldContainer>
    <Button>Συνέχεια</Button>
  </div>
);

export default WithBackLinkAndButton;