import React, { useState, useContext, useEffect } from "react";
import { CaseCard } from "../../pageElements/Cards.js";
import { Link, useNavigate } from "react-router-dom";
import {
  ArrowRight,
  Activity,
  FileEarmarkText,
  Pencil,
  Clock,
} from "react-bootstrap-icons";
import { db } from "../../firebase.js";
import { collection, onSnapshot, query, where } from "firebase/firestore";
import { Typeahead } from "react-bootstrap-typeahead";
import { AppContext } from "../../Hooks/useContext/appContext.js";
import UploadModal from "../Modals/UploadModal.js";
import Button from "react-bootstrap/Button";

const Dashboard = () => {
  const navigate = useNavigate();
  const [allCases, setAllCases] = useState(null);
  const [selectedCase, setSelectedCase] = useState(null);
  const [showModal, setShowModal] = useState();
  const [docCount, setDocCount] = useState();
  const [responseCount, setResponseCount] = useState();
  const { appState } = useContext(AppContext);
  const { group } = appState;
  const appUserId = group ? group.appUserId : null;

  function getCases() {
    if (!appUserId) {
      setAllCases([]);
      return;
    }
    const q = query(collection(db, "cases"), where("ownerId", "==", appUserId));
    const unsub = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map((doc) => doc.data());
      data.sort((a, b) => {
        return a.filedDate < b.filedDate ? 1 : -1;
      });
      setAllCases(data);
    });
    return unsub;
  }

  function getStats() {
    if (!appUserId) {
      return;
    }
    const q = query(
      collection(db, "documents"),
      where("ownerId", "==", appUserId)
    );
    const unsub = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map((doc) => doc.data());
      if (data) {
        setDocCount(data?.length);
        const respCount = data?.reduce(function (acc, obj) {
          return acc + obj.responseGenerations;
        }, 0);
        setResponseCount(respCount);
      }
    });
    return unsub;
  }

  useEffect(() => {
    if (!appUserId) {
      return;
    }
    const unsubCases = getCases();
    const unsubStats = getStats();
    return () => {
      typeof unsubCases !== "undefined" && unsubCases();
      typeof unsubStats !== "undefined" && unsubStats();
    };
  }, [appUserId]);

  const handleViewClick = (caseId) => {
    navigate(`/casedetails/${caseId}`);
  };

  if (!group) {
    return null;
  }

  return (
    <>
      <div className="dashboard-header">
        <h2 className="doc-header-text">
          {!!(group.firstName && group.lastName) ? (
            <span>
              {group.firstName} {group.lastName}
            </span>
          ) : (
            <></>
          )}
        </h2>
        <div className="user-name-container2">{group.firm}</div>
      </div>
      <div className="app-divider dash-divider" />
      <div className="stats-container">
        <div className="stats-row-box">
          <div className="stats-unit-wrapper">
            <div className="stats-icon-wrapper">
              <Activity style={{ color: "#f27300" }} />
            </div>
            {allCases?.length >= 1 ? (
              <div>
                <p className="stats-text">
                  {allCases?.length === 1
                    ? `${allCases?.length} active case`
                    : `${allCases?.length} active cases`}
                </p>
              </div>
            ) : (
              <div>
                <p className="stats-text">
                  {allCases?.length} active cases - Click on the "Cases" tab,
                  above, and create a case to get started.
                </p>
              </div>
            )}
          </div>

          <div className="stats-unit-wrapper">
            {allCases?.length >= 1 ? (
              <>
                <div className="stats-icon-wrapper">
                  <FileEarmarkText style={{ color: "#6da8dc" }} />
                </div>
                <div>
                  <p className="stats-text">
                    {docCount === 1
                      ? `${docCount} document uploaded`
                      : `${docCount} documents uploaded`}
                  </p>
                </div>
              </>
            ) : (
              <></>
            )}
          </div>

          <div className="stats-unit-wrapper">
            {responseCount > 0 ? (
              <>
                <div className="stats-icon-wrapper">
                  <Pencil style={{ color: "#767676" }} />
                </div>
                <div>
                  <p className="stats-text">
                    {responseCount}
                    {responseCount < 2
                      ? " response Novodrafted"
                      : " responses Novodrafted"}
                  </p>
                </div>
              </>
            ) : (
              <></>
            )}
          </div>
          <div className="stats-unit-wrapper">
            {responseCount > 0 ? (
              <>
                <div className="stats-icon-wrapper">
                  <Clock style={{ color: "#f27300" }} />
                </div>
                <div>
                  <p className="stats-text">
                    {Math.round(responseCount * 3.2989 * 100) / 100} hours saved
                    using Novodraft
                  </p>
                </div>
              </>
            ) : (
              <></>
            )}
          </div>
        </div>
      </div>
      {allCases === null ? <div>Loading...</div> : null}
      {allCases !== null ? (
        <div>
          <div className="dashboard-filter mb-3">
            <Typeahead
              className="flex-grow-1"
              id="case-search"
              labelKey="caseNumber"
              options={allCases}
              minLength={1}
              placeholder="Search by Case Number"
              onChange={(selected) => {
                let item = null;
                for (const currentItem of selected) {
                  item = { ...currentItem };
                }
                setSelectedCase(item);
              }}
            />
            <Button
              disabled={selectedCase === null}
              onClick={() => handleViewClick(selectedCase?.caseId)}
            >
              View Case
            </Button>
            <Button
              disabled={selectedCase === null}
              onClick={() => setShowModal(true)}
            >
              Express Document Upload
            </Button>
          </div>
          {allCases.slice(0, 3).map((c, i) => (
            <CaseCard
              key={`linkcard-${i}`}
              caption={c.caption}
              captionTwo={c.captionTwo}
              jurisdiction={c.jurisdiction}
              caseNumber={`Index no. ${c.caseNumber}`}
              filedDate={c.filedDate}
              caseId={c.caseId}
              labelText="View"
              onClick={handleViewClick}
            />
          ))}
          {allCases?.length > 3 ? (
            <div className="view-all-link-box mb-3">
              <div className="view-all-wrapper">
                <Link className="view-all-link" to="/cases">
                  View All{" "}
                  <span className="arrow-wrapper">
                    <ArrowRight />
                  </span>
                </Link>
              </div>
            </div>
          ) : null}
        </div>
      ) : null}
      {showModal && selectedCase !== null ? (
        <UploadModal setShowModal={setShowModal} caseData={selectedCase} />
      ) : null}
    </>
  );
};

export default Dashboard;
