import React, { useEffect, useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { DetailCard } from "../../pageElements/DetailCard.js";
import Button from "../../pageElements/Button";
import CreateModal from "../Modals/CreateModal.js";
import UploadModal from "../Modals/UploadModal.js";
import { db } from "../../firebase";
import { useParams } from "react-router-dom";
import { AppContext } from "../../Hooks/useContext/appContext.js";
import LoadingSpinner from "../../pageElements/LoadingSpinner";
import { doc, onSnapshot } from "firebase/firestore";

const CaseDetailsPage = () => {
  const { caseId } = useParams();
  const [subCase, setSubCase] = useState(null);
  const navigate = useNavigate();
  const [showUploadModal, setShowUploadModal] = useState();
  const [showCreateModal, setShowCreateModal] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const { appState } = useContext(AppContext);
  const { group } = appState;
  const appUserId = group ? group.appUserId : null;
  const message =
    "Parsing document.  Please be patient, this may take several minutes.";

  const handleNavigate = () => {
    navigate("/documents");
  };

  const handleBack = () => {
    navigate("/cases");
  };

  function getCase() {
    const docRef = doc(db, "cases", caseId);
    const unsub = onSnapshot(docRef, (snapshot) => {
      if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
        setSubCase({ ...snapshot.data(), id: snapshot.id });
      } else {
        setSubCase(null);
      }
    });
    return unsub;
  }

  useEffect(getCase, [caseId, appUserId]);

  const handleSuccess = () => {
    setIsLoading(true);
    setShowUploadModal(false);
    setTimeout(handleNavigate, 40000);
  };

  const ButtonContent = () => {
    return (
      <div className="details-button-container">
        <div className="details-butn-wrapper">
          <Button
            onClick={() => setShowCreateModal(true)}
            labelText="Edit"
            className="primary-button"
          />
        </div>
        <div className="details-button-box">
          <Button
            className="secondary-button back-button"
            onClick={handleBack}
            labelText="Back"
          />
          <div className="upload-button-box">
            <Button
              className="p-2 mr-2 primary-button"
              onClick={() => setShowUploadModal(true)}
              labelText="Upload Document"
            />
          </div>
        </div>
      </div>
    );
  };

  if (!group) {
    return null;
  }

  const HeadingContent = () => {
    return (
      <div className="details-heading-container">
        <h3 className="details-heading">Case Details:</h3>
        <div className="details-subhead">
          <h3 className="details-heading2">
            {subCase?.caption} v. {subCase?.captionTwo}
          </h3>
          <div className="pheno-phun">
            <h3 className="details-heading3">Index Number:</h3>
            <h3 className="details-heading4">{subCase?.caseNumber}</h3>
          </div>
        </div>
      </div>
    );
  };

  const showUp = showUploadModal && subCase !== null ? true : false;
  const showCreate = showCreateModal && subCase !== null ? true : false;
  return (
    <div className="details-container">
      {isLoading ? <LoadingSpinner message={message} /> : null}
      {!isLoading ? <HeadingContent /> : null}
      {!isLoading ? (
        showUp ? (
          <UploadModal
            setShowModal={setShowUploadModal}
            setIsLoading={setIsLoading}
            handleSuccess={handleSuccess}
            caseData={subCase}
          />
        ) : null
      ) : null}
      {!isLoading ? (
        showCreate ? (
          <CreateModal setShowModal={setShowCreateModal} caseData={subCase} />
        ) : null
      ) : null}
      {!isLoading ? (
        subCase !== null ? (
          <DetailCard data={subCase} />
        ) : null
      ) : null}
      {!isLoading ? <ButtonContent /> : null}
    </div>
  );
};

export default CaseDetailsPage;