import React, { useState } from 'react';

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

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 Dense = (_: any) => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ minHeight: '300px' }}>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        Προσθήκη τηλεφώνου
      </Button>
      <Modal open={open} aria-labelledby="modal-label" dense>
        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
        <ModalContent>
          <FieldContainer margin={0}>
            <LabelContainer>
              Συμπληρώστε το τηλέφωνο επικοινωνίας
              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
            </LabelContainer>
          </FieldContainer>
        </ModalContent>
        <ModalAction>
          <Button>Υποβολή</Button>
          <Button
            variant="link"
            onClick={() => {
              setOpen(!open);
            }}
          >
            Ακύρωση
          </Button>
        </ModalAction>
      </Modal>
    </div>
  );
};

export default Dense;