import React from 'react';
import {
  Modal,
  ModalHeading,
  ModalContent,
  ModalAction,
} from '@digigov/ui/app/Modal';
import { useModal } from '@digigov/ui/app/Modal/hooks';
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 WithHooks = (_: any) => {
  const { registerModal, registerAction } = useModal();
  return (
    <div style={{ minHeight: '300px' }}>
      <Button {...registerAction('modal-1', 'open')}>Προσθήκη τηλεφώνου</Button>
      <Modal
        {...registerModal('modal-1', {
          clickOutside: true,
          closeOnEscape: true,
        })}
      >
        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
        <ModalContent>
          <FieldContainer margin={0}>
            <LabelContainer>
              Συμπληρώστε το τηλέφωνο επικοινωνίας
              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
            </LabelContainer>
          </FieldContainer>
        </ModalContent>
        <ModalAction>
          <Button>Υποβολή</Button>
          <Button {...registerAction('modal-1', 'close', { variant: 'link' })}>
            Ακύρωση
          </Button>
        </ModalAction>
      </Modal>
    </div>
  );
};

export default WithHooks;