var stars = 0;

/* opening and closing menu functions */
function openClosedMenu() {
   document.getElementById("theGladOrSad").classList = "closed-menu";
   document
       .getElementById("closed-content")
       .addEventListener("click", openStarMenu);
   document.getElementById("closed-content").classList = "";
}

function openStarMenu() {
   // hide previous content
   document.getElementById("closed-content").classList = "hidden";
   // open menu
   document.getElementById("theGladOrSad").classList = "star-menu";
   // show content
   document.getElementById("star-content").classList = "";
   addStarListeners();
   addStarClose();
}

function addStarClose() {
   document.getElementById("star-menu-close").addEventListener("click", () => {
      openClosedMenu();
      document.getElementById("star-content").classList = "hidden";
   });
}

function openFeedbackMenu() {
   // hide previous content
   document.getElementById("star-content").classList = "hidden";
   // open menu
   document.getElementById("theGladOrSad").classList = "feedback-menu";
   // show content
   document.getElementById("feedback-content").classList = "";
   document
       .getElementById("feedback-content")
       .addEventListener("submit", submitFeedback);
   document
       .getElementById("feedback-menu-close")
       .addEventListener("click", () => {
          const submitEvent = new SubmitEvent("submit");
          document.getElementById("feedback-content").dispatchEvent(submitEvent);
       });
}

function openThankyouMenu() {
   // hide previous content
   document.getElementById("feedback-content").classList = "hidden";
   // open menu
   document.getElementById("theGladOrSad").classList = "thankyou-menu";
   // show content
   document.getElementById("thankyou-content").classList = "";
   setTimeout(() => {
      document.getElementById("theGladOrSad").classList = "closed-thankyou";
   }, "2000");
}

function closeStarMenu() {
   document.getElementById("star-content").classList = "hidden";
   document.getElementById("star-menu-close").addEventListener("click", () => {
      document.getElementById("theGladOrSad").style.animation =
          "closeStarMenu 1s";
      document.getElementById("theGladOrSad").classList = "closed-menu";
   });
}

function createMouseListeners(num) {
   let element = document.getElementById("star" + num);
   element.addEventListener("mouseover", function starOver() {
      if (stars == 0) {
         lightStars(num);
      }
   });
   element.addEventListener("click", function starClick() {
      if (stars == 0) {
         selectStar(num);
      }
   });
}

function addStarListeners() {
   document
       .getElementById("star-content")
       .addEventListener("mouseleave", function mouseLeave() {
          if (stars == 0) {
             lightStars(0);
          }
       });
   for (let i = 1; i < 6; i++) {
      createMouseListeners(i);
   }
}

function lightStars(num) {
   for (let i = 1; i < num + 1; i++) {
      document.getElementById("star" + i).classList = "star-checked";
   }
   for (let i = 5; i > num; i--) {
      document.getElementById("star" + i).classList = "star";
   }
}

function selectStar(num) {
   stars = num;
   lightStars(num);
   // document.getElementById("star" + num).classList = "star-selected";
   setTimeout(openFeedbackMenu, 750);
}

function submitFeedback(event) {
   event.preventDefault();
   openThankyouMenu();
   sendFeedback();
}

function getUID() {
   if (document.querySelector("[title='Sign In']") != null) {
      return "";
   }
   const list = document
       .querySelector("div.dropdown.pull-right")
       .querySelector("ul")
       .querySelectorAll("li");
   let link;
   list.forEach((element) => {
      const childLink = element.querySelector("a");
      if (childLink) {
         if (childLink.innerText.includes("My Profile"))
            link = childLink.getAttribute("href");
      }
   });
   return link.split("ID=")[1];
}

function buildBody() {
   const email = document.getElementById("emailInput").value;
   const feedbackText = document.getElementById("textFeedback").value;
   const url = window.location.href;
   const uid = getUID();
   return {
      rating: stars,
      website: url,
      uid: uid,
      email: email,
      feedback: feedbackText,
   };
}

function sendFeedback() {
   const postUrl = "https://glad-or-sad-backend.herokuapp.com/feedback";
   const postBody = buildBody();
   const xhr = new XMLHttpRequest();
   xhr.open("POST", postUrl, true);
   xhr.setRequestHeader("Content-Type", "application/json");
   xhr.send(JSON.stringify(postBody));
   xhr.responseType = "text";
   setTimeout(() => {
   }, 2000);
   setFeedbackWasLeft();
}

function setFeedbackWasLeft() {
   const myVariable = {time: new Date()};
   sessionStorage["feedbackWasLeft"] = JSON.stringify(myVariable);
}

function timeSinceFeedback() {
   let str;
   let timeSince = 600000;
   if (sessionStorage["feedbackWasLeft"]) {
      str = JSON.parse(sessionStorage["feedbackWasLeft"]);
      timeSince = new Date().getTime() - new Date(str.time).getTime();

   }
   return timeSince;
}

function driver() {
   if (timeSinceFeedback() < 60000) return;
   const gladOrSad = document.createElement("div");
   gladOrSad.id = "theGladOrSad";
   gladOrSad.innerHTML =
       "<div id='closed-content'>\n" +
       "   <p>Feedback</p>\n" +
       "</div>\n" +
       "<div id='star-content' class='hidden'>\n" +
       "   <div id='star-menu-close'>×</div>\n" +
       "   <div></div>\n" +
       "   <div class='star-menu-text'>How would you rate the OneStop?</div>\n" +
       "   <div></div>\n" +
       "   <div id='star1' class='star' name='star'></div>\n" +
       "   <div id='star2' class='star' name='star'></div>\n" +
       "   <div id='star3' class='star' name='star'></div>\n" +
       "   <div id='star4' class='star' name='star'></div>\n" +
       "   <div id='star5' class='star' name='star'></div>\n" +
       "   <div></div>\n" +
       "</div>\n" +
       "<form id='feedback-content' class='hidden'>\n" +
       "   <div id='feedback-menu-close' style='text-align: right; padding-right: 18px'>\n" +
       "      ×\n" +
       "   </div>\n" +
       "   <p>How could we improve the OneStop? (optional)</p>\n" +
       "   <textarea id='textFeedback'></textarea>\n" +
       "   <p>Your Email (optional):</p>\n" +
       "   <input id='emailInput' type='text' />\n" +
       "   <p>For help with student-specific issues,\n" +
       "      <a href='https://td.byui.edu/TDClient/87/Portal/Requests/TicketRequests/NewForm?ID=ZF2Yb14z-Ro_&RequestorType=Service'\n" +
       "         style='color: #F6E179; text-decoration: underline'>submit a request here</a>.\n" +
       "   </p>\n" +
       "   <br />\n" +
       "   <input type='submit' value='Submit' />\n" +
       "</form>\n" +
       "<div id='thankyou-content' class='hidden'>\n" +
       "   <p>Thank you for your feedback!</p>\n" +
       "</div>";
   document.body.appendChild(gladOrSad);
   var styleTag = document.createElement("link");
   styleTag.rel = "stylesheet";
   styleTag.href = "https://glad-or-sad-backend.herokuapp.com/glad-or-sad-css";
   document.getElementsByTagName("head")[0].appendChild(styleTag);
   openClosedMenu();
}

// if the document isn't loaded wait until it is
document.body.onload = driver();

if (window.location.href == "https://td.byui.edu/TDClient/87/Portal/Home/?ID=66237ad8-7a61-496a-927d-3aaa59a6a421") document.getElementById('webChatLink').onclick = () => { document.querySelector('[aria-label="Open BYUI Virtual Assistant Chatbot"]').click(); }

// if document is already loaded, run the driver
if (document.readyState === "complete") {
   driver();
}