import React, { useState } from 'react';

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

import { Button } from '@digigov/ui/form/Button';
import { Paragraph } from '@digigov/ui/typography/Paragraph';

export const AlertDialog = (_: any) => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ minHeight: '300px' }}>
      <Button
        color="warning"
        onClick={() => {
          setOpen(!open);
        }}
      >
        Διαγραφή εγγραφής
      </Button>
      <Modal
        open={open}
        role="alertdialog"
        aria-labelledby="modal-label"
        aria-describedby="modal-content"
      >
        <ModalHeading id="modal-label">Επιβεβαίωση</ModalHeading>
        <ModalContent id="modal-content">
          <Paragraph margin={0}>
            Είστε σίγουροι ότι θέλετε να διαγράψετε την εγγραφή;
          </Paragraph>
        </ModalContent>
        <ModalAction>
          <Button color="warning">Διαγραφή</Button>
          <Button
            variant="link"
            onClick={() => {
              setOpen(!open);
            }}
          >
            Ακύρωση
          </Button>
        </ModalAction>
      </Modal>
    </div>
  );
};

export default AlertDialog;