import React from 'react';

import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import {
  RadioContainer,
  RadioItem,
  RadioConditional,
} from '@digigov/ui/form/RadioContainer';

import { TextInput } from '@digigov/ui/form/TextInput';

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

export const ConditionalReveal = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="contact-hint">
      <FieldsetLegend>Πως θέλετε να επικοινωνήσουμε μαζί σας;</FieldsetLegend>
      <Hint id="contact-hint">Επιλέξτε ό,τι ισχύει στην περίπτωση σας.</Hint>
      <RadioContainer>
        <RadioItem defaultChecked name="contact" value="email">
          Email
        </RadioItem>
        <RadioConditional>
          Ηλεκτρονική διεύθυνση email
          <TextInput name="email" width="33.3%" />
        </RadioConditional>
        <RadioItem name="contact" value="phone">
          Τηλέφωνο
        </RadioItem>
      </RadioContainer>
    </Fieldset>
  </FieldContainer>
);

export default ConditionalReveal;