import { useState } from "react";
import Button from "../../pageElements/Button";
import Modal from "react-bootstrap/Modal";
import TextInput from "../../pageElements/TextInput";

import { db } from "../../firebase";
const ConfirmModal = ({
  onCancel,
  onConfirm,
  buttonLabelText,
  modalText,
  isBusy,
  isReport,
  appUserId,
  caseId,
  documentId,
  issueText,
  setIssueText,
  reportDoc,
}) => {
  console.log("isReport", isReport);

  return (
    <Modal show="true" onHide={onCancel} size="lg">
      <Modal.Header closeButton>
        {isReport ? (
          <Modal.Title>Report an issue</Modal.Title>
        ) : (
          <Modal.Title>Confirmation</Modal.Title>
        )}
      </Modal.Header>
      <Modal.Body>
        <span>{modalText}</span>
        {isReport ? (
          <div style={{ marginTop: "16px" }}>
            <TextInput
              key={"captionTwo"}
              name={"captionTwo"}
              value={issueText}
              message={"data.captionTwo.message"}
              onChange={(e) => setIssueText(e.target.value)}
              label={issueText ? "" : "Description of issue"}
            />
          </div>
        ) : (
          <></>
        )}
      </Modal.Body>
      <Modal.Footer>
        <Button
          disabled={isBusy}
          className="secondary-button"
          onClick={onCancel}
          labelText="Cancel"
        />
        <Button
          disabled={isBusy}
          className="primary-button"
          onClick={onConfirm}
          labelText={buttonLabelText}
        />
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmModal;
