import React from 'react';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import {
  SingleCharacterInputs,
  SingleCharacterInput,
} from '@digigov/ui/form/SingleCharacterInputs';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const WithErrorMessageLessDigit = (_: any) => (
  <FieldContainer error>
    <Fieldset aria-describedby="code-hint">
      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
      <Hint id="code-hint">
        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.
      </Hint>
      <ErrorMessage id="code-error">
        <VisuallyHidden>Λάθος:</VisuallyHidden>
        Έχετε συμπληρώσει λιγότερα από 6 ψηφία.
      </ErrorMessage>
      <SingleCharacterInputs aria-describedby="code-error">
        <SingleCharacterInput name="first-digit" defaultValue="6" />
        <SingleCharacterInput name="second-digit" defaultValue="4" />
        <SingleCharacterInput name="third-digit" defaultValue="5" />
        <SingleCharacterInput name="forth-digit" error />
        <SingleCharacterInput name="fifth-digit" error />
        <SingleCharacterInput name="sixth-digit" error />
      </SingleCharacterInputs>
    </Fieldset>
  </FieldContainer>
);

export default WithErrorMessageLessDigit;