import { useState, useContext, useEffect } from "react";
import NewYorkCaption from "./captionHeaders/newYorkCaption.js";
import NewJerseyCaption from "./captionHeaders/newJerseyCaption.js";
import FloridaCaption from "./captionHeaders/floridaCaption.js";
import { useParams } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import EditElement from "../../pageElements/EditElement";
import { db } from "../../firebase";
import {
  collection,
  updateDoc,
  onSnapshot,
  doc,
  getDoc,
  setDoc,
  increment,
} from "firebase/firestore";
import { AppContext } from "../../Hooks/useContext/appContext";
import Button from "../../pageElements/Button";
import ConfirmModal from "../Modals/ConfirmModal";
import LoadingSpinner from "../../pageElements/LoadingSpinner";
import { docEditCopy } from "../../Constants/Copy/docEditCopy.js";
import "../../styles/docedit-page.scss";

const DocEditPage = (props) => {
  const { documentId, caseId } = useParams();
  const [document, setDocument] = useState(null);
  const [docType, setDocType] = useState(null);
  const [fetchedCase, setFetchedCase] = useState(null);
  const [parsedRogs, setParsedRogs] = useState(null);
  const [docLoaded, setDocLoaded] = useState(false);
  const { appState } = useContext(AppContext);
  const { group } = appState;
  const appUserId = group ? group.appUserId : null;

  const apiUrl =
    process.env.NODE_ENV === "development"
      ? process.env.REACT_APP_API_DEV
      : process.env.REACT_APP_API_PROD;

  async function getParsedRequests(docId, docType) {
    try {
      const response = await fetch(
        `${apiUrl}/getParsedRequests/${documentId}/${docType}`,
        {
          method: "GET",
        }
      );
      const res = await response.json();
      console.log("res", res);
      const req = res[0].requests;
      if (req.length > 1) {
        setParsedRogs(req);
      }
    } catch (err) {
      console.log("Error occured GET parsed req:", err);
    }
  }

  async function getDocument(docId) {
    try {
      const docRef = doc(db, "documents", `${docId}`);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        const bar = docSnap.data();
        if (bar.docType) {
          console.log(bar.docType);
          let zib = bar.docType;
          console.log("zib", zib);
          getz(docId, zib);
        }
      } else {
        console.log("DB item does not exist");
      }
    } catch (error) {
      console.log(`A system error has occurred: ${error}`);
    }
  }

  async function getCase(caseId) {
    try {
      const docRef = doc(db, "cases", `${caseId}`);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        const _case = docSnap.data();
        _case.id = docSnap._key.path.segments[1];
        setFetchedCase(_case);
      } else {
        console.log("DB item does not exist");
      }
    } catch (error) {
      console.log(`A system error has occurred: ${error}`);
    }
  }

  async function getz(docId, zib) {
    console.log("zibbbt", zib);
    try {
      fetch(`${apiUrl}/v1/get-parsed-requests/${documentId}/${zib}`, {
        method: "GET",
      })
        .then(function (response) {
          return response.json();
        })
        .then((data) => {
          const respArray = data[0].responses;
          const result = respArray?.map((item, index) => {
            let obj = {};
            obj["showInputEle"] = false;
            obj["resp"] = item.text;
            obj["index"] = index;
            return obj;
          });
          setParsedRogs(result);
          console.log("parsedRogs", parsedRogs);
        });
    } catch (err) {
      console.log("Error occured:", err);
    }
  }
  useEffect(() => {
    if (!documentId) {
      return;
    }
    getDocument(documentId);
  }, [documentId]);

  useEffect(() => {
    if (!caseId) {
      return;
    }
    getCase(caseId);
    getDocument(documentId);
  }, [caseId, documentId]);

  return <div>Doc Edit</div>;
};

export default DocEditPage;