import React, { memo } from 'react';
import { areEqual } from 'Utils/equalityChecks';
import { Modal } from 'Components/Modal';
import { Button } from 'Components/Button';

import classes from './deleteFormModal.module.css';

interface Props {
  id: number;
  isOpen: boolean;
  modalCloseClick: (e: any) => void;
  onDelete: (id: number) => void;
}

const DeleteFormModal = ({ id, isOpen, modalCloseClick, onDelete }: Props) => (
  <div>
    <Modal
      id={id && id.toString()}
      leftHeaderIcon="projects"
      classes={classes}
      title="Delete Contract Form?"
      isOpen={isOpen}
      modalHeader
      footerButtons={
        <Button
          className={`${classes.delete}`}
          id={id && id.toString()}
          onClick={(e) => {
            e.preventDefault();
            onDelete(id);
          }}
        >
          Delete
        </Button>
      }
      modalFooter
      closeButtonText="Cancel"
      dataBsBackdrop="static"
      dataBsKeyboard="false"
      modalCloseClick={modalCloseClick}
    >
      <div className={classes.deleteModalCopy}>
        <p>Are you sure you want to delete this form?</p>
      </div>
    </Modal>
  </div>
);

const DeleteFormModalMemo = memo(DeleteFormModal, areEqual);

export { DeleteFormModalMemo as DeleteFormModal };
