// ==UserScript==
// @name         hipda-emoji
// @namespace    https://github.com/maltoze
// @version      0.1.1
// @description  HiPDA emoji support
// @author       maltoze
// @match        https://www.hi-pda.com/forum/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function () {
  "use strict";

  const needDecodeEntity = "&";
  Array.from(document.getElementsByClassName("t_msgfont")).forEach((elem) => {
    if (elem.innerHTML.includes(needDecodeEntity)) {
      elem.innerHTML = elem.innerHTML.replaceAll(needDecodeEntity, "&");
    }
  });

  const fastPostSmiliesElem = document.querySelector("#fastpostsmilies");
  const cmdBeforeElem = document.querySelector("#e_cmd_custom1_rm");
  if (!fastPostSmiliesElem && !cmdBeforeElem) {
    return;
  }

  function insertEmojiTrigger(elem, style) {
    elem.insertAdjacentHTML(
      "afterend",
      `<a id="emoji-trigger" style="${style}">😀</a>`
    );
  }

  fastPostSmiliesElem &&
    insertEmojiTrigger(
      fastPostSmiliesElem,
      "text-indent: 0; background: none; text-decoration: none"
    );
  cmdBeforeElem &&
    insertEmojiTrigger(cmdBeforeElem, "text-indent: 0; text-align: center");

  function loadEmojiButton() {
    const emojiScript = document.createElement("script");
    emojiScript.type = "module";
    emojiScript.text = `
      import { EmojiButton } from 'https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.0/dist/index.min.js';

      const picker = new EmojiButton();
      const trigger = document.querySelector('#emoji-trigger');
      const fastPostMessageElem = document.querySelector('#fastpostmessage');
      const postBoxIframe = document.querySelector('#postbox #e_iframe');
      const postBoxBodyElem =
        postBoxIframe && postBoxIframe.contentWindow.document.querySelector("body");

      picker.on('emoji', selection => {
        if (fastPostMessageElem) {
          fastPostMessageElem.value += selection.emoji;
        }
        if (postBoxBodyElem) {
          postBoxBodyElem.innerHTML += selection.emoji;
        }
      });

      trigger.addEventListener('click', () => picker.togglePicker(trigger));
    `;
    document.body.appendChild(emojiScript);
  }

  loadEmojiButton();
})();