import React from 'react';

import { ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
import {
  ModalAuto,
  ModalButtonAuto,
  ModalProvider,
} from '@digigov/ui/app/Modal/auto';

import { Button } from '@digigov/ui/form/Button';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer } from '@digigov/ui/form/LabelContainer';
import { TextInput } from '@digigov/ui/form/TextInput';
export const Auto = (_: any) => {
  return (
    <div style={{ minHeight: '300px' }}>
      <ModalProvider>
        <ModalButtonAuto open modal="modal-1">
          Προσθήκη τηλεφώνου
        </ModalButtonAuto>
        <ModalAuto id="modal-1" clickOutside>
          <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
          <ModalContent>
            <FieldContainer margin={0}>
              <LabelContainer>
                Συμπληρώστε το τηλέφωνο επικοινωνίας
                <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
              </LabelContainer>
            </FieldContainer>
          </ModalContent>
          <ModalAction>
            <Button>Υποβολή</Button>
            <ModalButtonAuto modal="modal-1" close variant="link">
              Ακύρωση
            </ModalButtonAuto>
          </ModalAction>
        </ModalAuto>
        <ModalButtonAuto modal="modal-2" open>
          Προσθήκη κινητού τηλεφώνου
        </ModalButtonAuto>
        <ModalAuto id="modal-2" closeOnEscape>
          <ModalHeading id="modal-label">
            Προσθήκη κινητού τηλεφώνου
          </ModalHeading>
          <ModalContent>
            <FieldContainer margin={0}>
              <LabelContainer>
                Συμπληρώστε το κινητό τηλέφωνο επικοινωνίας
                <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
              </LabelContainer>
            </FieldContainer>
          </ModalContent>
          <ModalAction>
            <Button>Υποβολή</Button>
            <ModalButtonAuto modal="modal-2" variant="link" close>
              Ακύρωση
            </ModalButtonAuto>
          </ModalAction>
        </ModalAuto>
      </ModalProvider>
    </div>
  );
};

export default Auto;