import React, { useState, useEffect, useContext } from "react";
import { useNavigate, useParams } from "react-router-dom";
import JSOG from "jsog";
import { Outlet } from "react-router-dom";
import { CurrentPageNav } from "../Components/Styled/Main.style";
import {
  ProfessorCard,
  ProfessorCardDetails,
  ProfessorCardName,
  ProfessorCardSeparator,
} from "../Components/Styled/ProfessorCard.style";
import AuthApi from "../api/AuthApi";
import { AddOpinionButton } from "../Components/Styled/Modal.style";
import {
  EntityLi,
  EntityUl,
  EntityParam,
} from "../Components/Styled/EntityList.style";
import {
  Modal,
  ModalBody,
  ModalClose,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalInput,
  ModalTextarea,
} from "../Components/Styled/Modal.style";
import axios from "../api/axios";
import LoadingSpinner from "../Components/Styled/LoadingSpinner.style";

const Subject = () => {
  let params = useParams();
  let navigate = useNavigate();
  const { auth, setAuth } = useContext(AuthApi);

  const [subject, setSubject] = useState(null);
  const [loadedSubject, setLoadedSubject] = useState(false);
  const [threads, setThreads] = useState(null);
  const [loadedThreads, setLoadedThreads] = useState(false);
  const [fetchError, setFetchError] = useState(false);

  var totalTopics = 0;
  var topics = [];

  const [topicModalDisplay, setTopicModalDisplay] = useState("none");
  const [topicTitle, setTopicTitle] = useState("");
  const [topicContent, setTopicContent] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    Promise.all([fetch(`http://192.168.1.254:8080/public/subject/${params.subjectId}`),
                        fetch(`http://192.168.1.254:8080/public/subject/${params.subjectId}/threads`)])
        .then(([resSubject, resThreads]) => Promise.all([resSubject.json(), resThreads.json()]))
        .then(([dataSubject, dataThreads]) => {
          let cyclicGraph1 = dataSubject;
          let jsogStructure1 = JSOG.encode(cyclicGraph1);
          cyclicGraph1 = JSOG.decode(jsogStructure1);
          setSubject(cyclicGraph1);
          setLoadedSubject(true);

          let cyclicGraph2 = dataThreads;
          let jsogStructure2 = JSOG.encode(cyclicGraph2);
          cyclicGraph2 = JSOG.decode(jsogStructure2);
          setThreads(cyclicGraph2);
          setLoadedThreads(true);
        })

  }, []);

  const handleAddTopicButtonClick = () => {
    if (auth) {
      setTopicModalDisplay("block");
      document.body.style.overflowY = "hidden";
    } else {
      navigate("/login");
    }
  };

  const handleModalCloseClick = () => {
    setTopicModalDisplay("none");
    document.body.style.overflowY = "auto";
  };

  const handleTopicSubmit = async (e) => {
    e.preventDefault();

    if (!topicTitle.length < 1 && !topicContent.length < 1) {
      const response = await axios(
        `http://192.168.1.254:8080/secure/subject/${params.subjectId}/addThread`,
        {
          method: "post",
          data: {
            title: topicTitle,
            content: topicContent,
          },
          withCredentials: true,
        }
      );
      setErrorMessage("");
      window.location.reload();
    } else {
      setErrorMessage("Полињата за наслов и содржина не смеат да бидат празни");
    }
  };

  const handleContentChange = (e) => {
    setTopicContent(e.target.value);
  };

  const handleTitleChange = (e) => {
    setTopicTitle(e.target.value);
  };

  return loadedSubject ? (
    <>
      <CurrentPageNav>
        &#187;{" "}
        <a
          href={
            "/university/" +
            subject.studyProgramme.faculty.university.universityId
          }
        >
          {subject.studyProgramme.faculty.university.universityName}
        </a>{" "}
        &#187;{" "}
        <a href={"/faculty/" + subject.studyProgramme.faculty.facultyId}>
          {subject.studyProgramme.faculty.facultyName}
        </a>{" "}
        &#187; <a href="#">{subject.subjectName}</a>
      </CurrentPageNav>
      <ProfessorCard>
        <ProfessorCardName>{subject.subjectName} <span style={{opacity:"50%", fontSize:"16px"}}>#{subject.subjectId}</span></ProfessorCardName>
        <ProfessorCardSeparator />
        <div style={{ marginTop: "10px" }}>
          <ProfessorCardDetails fontSize="20px">
            {subject.studyProgramme.studyProgrammeName} (
            {subject.studyProgramme.cycle}
            {"."}
            {"циклус"})
          </ProfessorCardDetails>
          <ProfessorCardDetails fontSize="20px">
            {subject.studyProgramme.faculty.facultyName}
          </ProfessorCardDetails>
          <ProfessorCardDetails fontSize="15px">
            {subject.studyProgramme.faculty.university.universityName}
          </ProfessorCardDetails>
        </div>
      </ProfessorCard>
      <div style={{ height: "20px", marginBottom: "50px" }}>
        <h3
          style={{
            float: "left",
          }}
        >
          {threads.map((thread) => {
            if (thread.parent === null) {
              totalTopics++;
              topics.push(thread);
            }
          })}
          {totalTopics} {totalTopics !== 1 ? "теми" : "тема"}
        </h3>
        {auth && (
          <AddOpinionButton onClick={handleAddTopicButtonClick}>
            Отвори тема
          </AddOpinionButton>
        )}
      </div>
      <Modal display={topicModalDisplay}>
        <ModalContent>
          <ModalHeader>
            <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
            <h3 style={{ marginTop: "5px" }}>
              Тема во врска со {subject.subjectName}
            </h3>
          </ModalHeader>
          <form onSubmit={handleTopicSubmit}>
            <ModalBody>
              <label htmlFor="title">
                <b>Наслов</b>:
                <ModalInput
                  id="title"
                  value={topicTitle}
                  onChange={handleTitleChange}
                  spellCheck={false}
                />
              </label>
              <label htmlFor="content">
                <b>Содржина</b>:
                <ModalTextarea
                  id="content"
                  rows="8"
                  cols="100"
                  value={topicContent}
                  onChange={handleContentChange}
                  spellCheck={false}
                />
              </label>
            </ModalBody>
            <p style={{ color: "red", marginLeft: "15px", marginTop: "10px" }}>
              {errorMessage}
            </p>
            <ModalFooter type="submit">ОБЈАВИ</ModalFooter>
          </form>
        </ModalContent>
      </Modal>
      <div key={subject.subjectId}>
        {topics.map((topic) => {
          var numReplies = 0;
          topic.children.map((c)=>numReplies += ++c.children.length); // ++c.children.length -> c + decata na c
          return (
            <EntityUl key={topic.postId}>
              <EntityLi bgcolor="cornsilk">
                <a href={"/topic/" + topic.postId}>{topic.title.length >= 99 ? topic.title.slice(0,98) + "..." : topic.title}</a>
                <EntityParam right="30px">
                  <span style={{ fontWeight: "normal" }}>
                    отворил:{" "}
                    <a href={"/user/" + topic.author.id}>
                      {topic.author.username}
                    </a>
                  </span>
                  <span style={{ fontStyle: "normal" }}>,</span>{" "}
                  {numReplies !== 1 ? (
                    numReplies !== 0 ? (
                      <span
                        style={{
                          fontWeight: "normal",
                          opacity: numReplies === 0 ? "0.5" : "1",
                        }}
                      >
                        <span
                          style={{
                            fontWeight: "bold",
                            opacity: numReplies === 0 ? "0.5" : "1",
                          }}
                        >
                          {numReplies}
                        </span>{" "}
                        реплики
                      </span>
                    ) : (
                      <span
                        style={{
                          fontWeight: "normal",
                          opacity: numReplies === 0 ? "0.5" : "1",
                        }}
                      >
                        <span
                          style={{
                            fontWeight: "bold",
                            opacity: numReplies === 0 ? "0.5" : "1",
                          }}
                        >
                          {numReplies}
                        </span>{" "}
                        реплики
                      </span>
                    )
                  ) : (
                    <span style={{ fontWeight: "normal" }}>
                      <span style={{ fontWeight: "bold" }}>{numReplies}</span>{" "}
                      реплика
                    </span>
                  )}
                </EntityParam>
              </EntityLi>
            </EntityUl>
          );
        })}
      </div>
    </>
  ) : !fetchError ? (
    <div>
      <LoadingSpinner style={{ marginTop: "140px" }}/>
      <Outlet />
    </div>
  ) : (
    <div style={{ marginTop: "140px" }}>
      <h1 style={{ textAlign: "center" }}>Страницата не е пронајдена.</h1>
    </div>
  );
};

export default Subject;