// ==UserScript==
// @name         Kbin Kibby Avatars
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Displays a Kibby icon as the default for people with no avatars set.
// @author       minnieo
// @match        https://kbin.social/*
// @icon         https://i.imgur.com/NsA837G.png
// @grant        none
// @run-at       document-idle
// @license      MIT
// @downloadURL none
// ==/UserScript==

const noAvatar = document.querySelectorAll('div.no-avatar');

const randomKibby = [
  'https://i.imgur.com/NsA837G.png', 'https://i.imgur.com/xPVvoxo.png',
  'https://i.imgur.com/PjpXgD3.png', 'https://i.imgur.com/SnT8Pke.png',
  'https://i.imgur.com/lfztFLo.png',
  'https://i.imgur.com/bKJ9fGy.png', 'https://i.imgur.com/Vn2cWqG.png',
  'https://i.imgur.com/rRICo43.png', 'https://i.imgur.com/bR4eDxA.png',
  'https://i.imgur.com/ocusNzo.png', 'https://i.imgur.com/SPPHG7K.png',
  'https://i.imgur.com/4sxa4A4.png', 'https://i.imgur.com/k61jliP.png',
  'https://i.imgur.com/oTMmRJf.png', 'https://i.imgur.com/RDtxfru.png',
  'https://i.imgur.com/Cb3KN4R.png', 'https://i.imgur.com/zv59Y2V.png',
  'https://i.imgur.com/SbXOBav.png', 'https://i.imgur.com/5AUb92T.png',
  'https://i.imgur.com/FiWMv8v.png', 'https://i.imgur.com/9yHiByi.png',
  'https://i.imgur.com/V6wus6y.png', 'https://i.imgur.com/LO0TKtY.png',
];

const replaceAvatar = (avatar) => {
  const randomIndex = Math.floor(Math.random() * randomKibby.length);
  const randomKib = randomKibby[randomIndex];

  const kibbyAvatar = document.createElement('img');
  kibbyAvatar.alt = 'Default avatar';
  kibbyAvatar.src = randomKib;
  kibbyAvatar.style.cssText = `
    max-width: 40px;
    max-height: 40px;
  `;

  const parentElem = avatar.parentNode;
  parentElem.replaceChild(kibbyAvatar, avatar);
};

const replaceAvatars = () => {
  const avatarElements = Array.from(document.querySelectorAll('div.no-avatar'));
  avatarElements.forEach(replaceAvatar);
};

const mutationObserver = new MutationObserver((entries) => {
  let hasUnreplacedAvatars = false;

  entries.forEach((entry) => {
    const addedNodes = Array.from(entry.addedNodes);
    const avatarElements = addedNodes.flatMap((node) =>
      Array.from(node.querySelectorAll('div.no-avatar'))
    );
    avatarElements.forEach((avatar) => {
      replaceAvatar(avatar);
      hasUnreplacedAvatars = true;
    });
  });

  if (!hasUnreplacedAvatars) {
    mutationObserver.disconnect();
  }
});

const commentSection = document.querySelector('section.comments.entry-comments.comments-tree');

replaceAvatars();
mutationObserver.observe(commentSection, {
  childList: true,
  subtree: true,
});