// Selectors
const chatContainer = document.querySelector(".chat");
const chatField = document.querySelector(".field");
const sendButton = document.querySelector(".send");
const chatWindow = document.querySelector(".window");
const chatToggle = document.querySelector(".toggle");
const keyword = "coffee";
let menuOpen = false;

// Get chat toggle width
const originalWidth = chatToggle.offsetWidth;
// Set that width to be the minimum width of the toggle
chatToggle.style.minWidth = `${originalWidth}px`;

const addMsg = () => {
  // Check if field has content (and not only spaces)
  if (chatField.value.length > 0 && chatField.value.trim()) {
    // Create a new chat bubble from the user (hence "own")
    createBubble(chatWindow, chatField.value, "own");
    // Check if message has certain keyword...
    if (chatField.value.includes(keyword)) {
      // ...and respond to it.
      addResponse();
    }
    // Reset text field value
    chatField.value = "";
    // Disable send button
    sendButton.classList.remove("active");
    // Focus text field again
    chatField.focus();
  }
};

const createBubble = (destination, message, owner = "own") => {
  const chatBubble = document.createElement("div");
  chatBubble.className = "bubble";
  // Add separate classes for own and friend's messages
  if (owner == "own") {
    chatBubble.classList.add("own");
  } else {
    chatBubble.classList.add("guest");
  }
  // Insert message within bubble (note SECURITY)
  chatBubble.innerText = message;
  // Append child to destination
  destination.appendChild(chatBubble);
  // Scroll to the bottom of the destination container (chat window)
  destination.scrollTop = destination.scrollHeight;
};

const resizeToggle = (sourceWidth) => {
  // If menu is not open, set the width of the toggle equal to the chat window
  if (!menuOpen) {
    chatToggle.style.minWidth = `${sourceWidth}px`;
  } else {
    chatToggle.style.minWidth = `${originalWidth}px`;
  }
};

const toggleChat = (event) => {
  // Get chat window width
  chatWidth = chatContainer.offsetWidth;
  // Resize chat toggle
  resizeToggle(chatWidth);
  // Show chat
  chatContainer.classList.toggle("visible");
  // Expand toggle
  event.currentTarget.classList.toggle("open");
  // Tell screen readers that the content is not hidden anymore
  chatContainer.setAttribute("aria-hidden", false);
  // Toggle menu open variable
  menuOpen = !menuOpen;
  // Prevent event from bubbling
  event.stopPropagation();
  // Focus on the text field
  chatField.focus();
};

const closeChat = () => {
  // Close chat
  chatContainer.classList.remove("visible");
  // Let screenreaders know that content is hidden
  chatContainer.setAttribute("aria-hidden", true);
  // Reset toggle to close state
  chatToggle.classList.remove("open");
  resizeToggle();
  menuOpen = false;
  // Take focus out of chat text field...
  chatField.blur();
  // ...and focus on the toggle instead
  chatToggle.focus();
};

// Add event listeners to chat toggle and send button
chatToggle.addEventListener("click", toggleChat);
sendButton.addEventListener("click", addMsg);

// Add keyboard event listeners
window.addEventListener("keydown", function (e) {
  if (e.key == "Enter") {
    addMsg();
  }
});

window.addEventListener("keydown", (e) => {
  if (e.key == "Escape" && menuOpen) {
    closeChat();
  }
});

// Detect click outside the chat container to close chat
window.addEventListener("click", (e) => {
  console.log("container:", chatContainer);
  console.log("event target:", e.target);
  if (menuOpen && !chatContainer.contains(e.target)) {
    closeChat();
  }
});

// Toggle send button state based on chatfield content
chatField.addEventListener("input", () => {
  if (chatField.value.length > 0 && chatField.value.trim()) {
    sendButton.classList.add("active");
  } else {
    sendButton.classList.remove("active");
  }
});

// Add response to a message
const addResponse = () => {
  setTimeout(() => {
    createBubble(chatWindow, "Coffee sounds great!", "");
  }, 1000);
};