import React from 'react';

import {
  Checkbox,
  CheckboxItem,
  CheckboxConditional,
} from '@digigov/ui/form/Checkbox';

import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
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>
      <Checkbox>
        <CheckboxItem defaultChecked name="email" value="email">
          Email
        </CheckboxItem>
        <CheckboxConditional>
          Email address
          <TextInput name="email-address" width="33.3%" />
        </CheckboxConditional>
        <CheckboxItem name="email" value="phone">
          Τηλέφωνο
        </CheckboxItem>
      </Checkbox>
    </Fieldset>
  </FieldContainer>
);

export default ConditionalReveal;