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

const ConfirmModal = ({
  onCancel,
  onConfirm,
  buttonLabelText,
  modalText,
  isBusy,
  isReport,
  appUserId,
  caseId,
  documentId,
  issueText,
  setIssueText,
  reportDoc,
  titleText,
  isPromoModal,
  cancelButtonText,
}) => {
  const title = titleText ? titleText : "Confirmation";

  return (
    <Modal show="true" onHide={onCancel} size="lg">
      <Modal.Header closeButton>
        {isReport ? (
          <Modal.Title>Report an issue</Modal.Title>
        ) : (
          <Modal.Title>
            {titleText && !isPromoModal ? (
              <ExclamationTriangle
                style={{
                  color: "red",
                  marginRight: "8px",
                  marginBottom: "6px",
                }}
              />
            ) : (
              <></>
            )}
            {title}
          </Modal.Title>
        )}
      </Modal.Header>
      <Modal.Body>
        <span>{modalText}</span>
        {isReport || isPromoModal ? (
          <div style={{ marginTop: "16px" }}>
            <TextInput
              key={"captionTwo"}
              name={"captionTwo"}
              value={issueText}
              message={"data.captionTwo.message"}
              onChange={(e) => setIssueText(e.target.value)}
              label={
                issueText
                  ? ""
                  : isPromoModal
                  ? "Enter your promotional code"
                  : "Description of issue"
              }
            />
          </div>
        ) : (
          <></>
        )}
      </Modal.Body>
      <Modal.Footer>
        <Button
          disabled={isBusy}
          className="secondary-button"
          onClick={onCancel}
          labelText={cancelButtonText ? cancelButtonText : "Cancel"}
        />
        <Button
          disabled={isBusy}
          className="primary-button"
          onClick={onConfirm}
          labelText={buttonLabelText}
        />
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmModal;