// ==UserScript==
// @name         Emoji Button v1.0
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a button to open an emoji menu inside the chatbox in chat rooms, positioned on the far right of the chatbox container. The menu is now draggable from corners and resizing issues have been fixed.
// @author       toml12791
// @match        https://infinitylibrary.net/*
// @match        https://aither.cc/*
// @match        https://blutopia.cc/*
// @match        https://oldtoons.world/*
// @icon         https://i.ibb.co/Qm17XWR/image-removebg-preview.png
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
  "use strict"; /* Ensure the code runs in strict mode for better error checking */

  /* Array of emojis to display in the emoji menu */
  const emojis = [
    "🙂", "😊", "😂", "🙁", "😢", "😭", "🤔", "😳", "😠", "😏", "😴", "🙃",
    "👍", "👎", "👋", "💪", "👊", "🙏", "👀", "💀", "🚩", "👽", "💩", "🗿",
    "😎", "🤠", "🤓", "💎", "🎉", "🍻", "✨", "❤️", "👑", "🍆", "💦", "🔥",
  ];

  /* Function to create and append the emoji button and menu */
  function createEmojiButtonAndMenu() {
    /* Select the chatbox container where the button and menu will be added */
    const chatbox = document.querySelector("#chatbody > div > form > p");
    if (!chatbox) return; /* Exit if chatbox element is not found */

    chatbox.style.position = "relative"; /* Ensure chatbox is positioned relative to position button and menu absolutely */

    if (document.querySelector("#emoji-button")) return; /* Exit if the emoji button already exists */

    /* Create the emoji button element */
    const emojiButton = document.createElement("button");
    emojiButton.id = "emoji-button"; /* Set ID for the button */
    emojiButton.innerText = "📌"; /* Set text for the button (emoji) */
    emojiButton.style.textShadow = "1px 1px 2px rgba(0, 0, 0, 0.95)"; /* Add text shadow for better visibility */
    emojiButton.style.position = "absolute"; /* Position the button absolutely within the chatbox */
    emojiButton.style.right = "6px"; /* Position the button 6px from the right */
    emojiButton.style.bottom = "0px"; /* Position the button at the bottom */
    emojiButton.style.zIndex = "7"; /* Ensure the button is above other elements */
    emojiButton.style.padding = "5px"; /* Add padding inside the button */
    emojiButton.style.border = "2px outset #444"; /* Style the button border */
    emojiButton.style.backgroundColor = "#373737"; /* Set background color of the button */
    emojiButton.style.borderRadius = "5px"; /* Round the corners of the button */
    emojiButton.style.cursor = "pointer"; /* Change cursor to pointer when hovering over the button */

    /* Event listener to change background color on mouse over */
    emojiButton.addEventListener("mouseover", () => {
      emojiButton.style.backgroundColor = "#4a4a4a"; /* Darken background color on hover */
    });

    /* Event listener to revert background color on mouse out */
    emojiButton.addEventListener("mouseout", () => {
      emojiButton.style.backgroundColor = "#373737"; /* Restore original background color */
    });

    /* Event listener to change border style on mouse down */
    emojiButton.addEventListener("mousedown", () => {
      emojiButton.style.border = "2px inset #444"; /* Change border to inset style */
    });

    /* Event listener to revert border style on mouse up */
    emojiButton.addEventListener("mouseup", () => {
      emojiButton.style.border = "2px outset #444"; /* Restore border to outset style */
    });

    /* Prevent the default context menu from appearing on right-click */
    emojiButton.addEventListener("contextmenu", (event) => {
      event.preventDefault(); /* Prevent default context menu action */
    });

    /* Create the emoji menu element */
    const emojiMenu = document.createElement("div");
    emojiMenu.id = "emoji-menu"; /* Set ID for the emoji menu */
    emojiMenu.className = "emoji-menu-hidden"; /* Set initial class to hidden */
    emojiMenu.style.position = "absolute"; /* Position the menu absolutely within the chatbox */
    emojiMenu.style.right = "55px"; /* Position the menu 55px from the right */
    emojiMenu.style.top = "0px"; /* Position the menu at the top */
    emojiMenu.style.border = "2px outset #444"; /* Style the border of the menu */
    emojiMenu.style.backgroundColor = "#38363d"; /* Set background color of the menu */
    emojiMenu.style.padding = "6px"; /* Add padding inside the menu */
    emojiMenu.style.borderRadius = "5px"; /* Round the corners of the menu */
    //emojiMenu.style.boxShadow = "2px 2px 6px rgba(0, 0, 0, 0.95)"; /* Add shadow for better visibility */
    emojiMenu.style.zIndex = "7"; /* Ensure the menu is above other elements */
    emojiMenu.style.width = "115px"; /* Set the width of the menu */
    emojiMenu.style.display = "grid"; /* Use grid layout for emoji items */
    emojiMenu.style.gridTemplateColumns = "repeat(3, 1fr)"; /* Define grid layout with 12 columns */
    emojiMenu.style.gap = "5px"; /* Set gap between grid items */
    emojiMenu.style.overflowY = "auto"; /* Allow vertical scrolling if content overflows */
    emojiMenu.style.maxHeight = "440px"; /* Set maximum height for the menu */

    /* Create emoji items and add them to the menu */
    emojis.forEach((emoji) => {
      const emojiItem = document.createElement("span"); /* Create a span for each emoji */
      emojiItem.innerText = emoji; /* Set the emoji character as text */
      emojiItem.style.cursor = "pointer"; /* Change cursor to pointer on hover */
      emojiItem.style.padding = "1px 2px"; /* Add padding inside the emoji item */
      emojiItem.style.textShadow = "1.5px 1.5px 3px rgba(0, 0, 0, 0.95)"; /* Add text shadow for better visibility */

      /* Event listener to add emoji to chat input on click */
      emojiItem.addEventListener("click", () => {
        const chatInput = document.querySelector("#chatbox__messages-create"); /* Select chat input element */
        if (chatInput) {
          chatInput.value += emoji; /* Append emoji to chat input */
          chatInput.focus(); /* Focus chat input */
        }
      });

      /* Prevent default context menu and text selection */
      emojiItem.addEventListener("contextmenu", (event) => {
        event.preventDefault(); /* Prevent default context menu action */
        event.stopPropagation(); /* Stop event from propagating */
        window.getSelection().removeAllRanges(); /* Clear any text selection */
      });

      emojiMenu.appendChild(emojiItem); /* Add emoji item to the menu */
    });

    /* Toggle visibility of emoji menu on button click */
    emojiButton.addEventListener("click", (event) => {
      event.preventDefault(); /* Prevent default button action */
      emojiMenu.classList.toggle("emoji-menu-hidden"); /* Toggle the hidden class to show/hide the menu */
    });

    chatbox.appendChild(emojiButton); /* Append the emoji button to the chatbox */
    chatbox.appendChild(emojiMenu); /* Append the emoji menu to the chatbox */

    /* Load saved position of the emoji menu from localStorage */
    const savedPosition = JSON.parse(localStorage.getItem("emojiMenuPosition")); /* Retrieve saved position data */
    if (savedPosition) {
      emojiMenu.style.left = savedPosition.left; /* Apply saved left position */
      emojiMenu.style.top = savedPosition.top; /* Apply saved top position */
    } else {
      emojiMenu.style.right = "55px"; /* Default position if no saved data */
      emojiMenu.style.top = "0px"; /* Default position if no saved data */
    }

    /* Hide emoji menu when Enter key is pressed in chat input */
    //document.addEventListener("keydown", (event) => {
      //const chatInput = document.querySelector("#chatbox__messages-create"); /* Select chat input element */
      //if (event.key === "Enter" && document.activeElement === chatInput) {
        //emojiMenu.classList.add("emoji-menu-hidden"); /* Hide menu if Enter key is pressed */
      //}
    //});

    /* Add draggable corners to the emoji menu */
    const corners = ["top-left"]; /* Define draggable corner positions */
    corners.forEach((corner) => {
      const cornerDiv = document.createElement("div"); /* Create a div for the draggable corner */
      cornerDiv.className = `draggable-corner ${corner}`; /* Set class for the draggable corner */
      emojiMenu.appendChild(cornerDiv); /* Add draggable corner to the menu */
    });

    /* Variables for handling dragging */
    let isDragging = false; /* Flag to check if dragging is in progress */
    let startX, startY, initialX, initialY; /* Variables to store initial drag positions */

    /* Handle the drag start event */
    emojiMenu.addEventListener("mousedown", (event) => {
      if (event.target.classList.contains("draggable-corner")) {
        isDragging = true; /* Set dragging flag to true */
        startX = event.clientX; /* Store initial X position */
        startY = event.clientY; /* Store initial Y position */
        initialX = emojiMenu.offsetLeft; /* Store initial menu left position */
        initialY = emojiMenu.offsetTop; /* Store initial menu top position */
        event.preventDefault(); /* Prevent default mousedown action */
      }
    });

    /* Handle the drag movement event */
    document.addEventListener("mousemove", (event) => {
      if (isDragging) {
        const dx = event.clientX - startX; /* Calculate change in X position */
        const dy = event.clientY - startY; /* Calculate change in Y position */
        emojiMenu.style.left = `${initialX + dx}px`; /* Update menu left position */
        emojiMenu.style.top = `${initialY + dy}px`; /* Update menu top position */
      }
    });

    /* Handle the drag end event */
    document.addEventListener("mouseup", () => {
      if (isDragging) {
        isDragging = false; /* Reset dragging flag */
        emojiMenu.style.cursor = "default"; /* Reset cursor style */

        /* Save emoji menu position to localStorage */
        localStorage.setItem(
          "emojiMenuPosition",
          JSON.stringify({
            left: emojiMenu.style.left, /* Save left position */
            top: emojiMenu.style.top, /* Save top position */
          })
        );
      }
    });
  }

  /* Function to initialize the emoji button and menu with a slight delay */
  function initializeWithDelay() {
    setTimeout(createEmojiButtonAndMenu, 50); /* Delay initialization to allow elements to load */
  }

  initializeWithDelay(); /* Initial call to create emoji button and menu */

  /* Observer to re-initialize emoji button and menu if new elements are added to the DOM */
  const observerAddElements = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        initializeWithDelay(); /* Re-initialize if elements are added */
      }
    }
  });

  observerAddElements.observe(document.body, {
    childList: true, /* Observe changes to child elements */
    subtree: true, /* Observe changes to descendants */
  });
})();

/* Add CSS styles for the emoji menu and draggable corners */
const style = document.createElement("style");
style.textContent = `
  .emoji-menu-hidden {
    display: none !important; /* Hide emoji menu */
  }
`;
document.head.appendChild(style); /* Append style to document head */

const style2 = document.createElement("style");
style2.textContent = `

  #emoji-menu span {
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Smooth animation for emojis */
    display: inline-block; /* Ensure emojis are displayed inline and that the animation is smoothed properly */
  }

  #emoji-menu span:hover {
    animation: float 1.65s infinite; /* Floating animation on hover */
  }

  @keyframes float {
    0% { transform: translateY(0px) scale(1); } /* Initial state */
    25% { transform: translateY(-5px) scale(1.3) rotate(3deg); } /* Float up and rotate */
    50% { transform: translateY(0px) scale(1.3) rotate(-3deg); } /* Float back down and rotate */
    75% { transform: translateY(-5px) scale(1.3) rotate(2deg); } /* Float up and rotate */
    100% { transform: translateY(0px) scale(1) rotate(0deg); } /* Restore to initial state */
  }

  .draggable-corner {
    position: absolute; /* Position the corner absolutely */
    width: 10px; /* Size of the draggable corner */
    height: 10px; /* Size of the draggable corner */
    background-color: #646470; /* Background color of draggable corner */
    cursor: grab; /* Cursor style for dragging */
    border-radius: 0 0 3px 0; /* Rounded bottom-right corner */
  }

  .draggable-corner.top-left { top: 0; left: 0; } /* Position of the top-left corner */
`;
document.head.appendChild(style2); /* Append additional style to document head */