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

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

const randomKibby = [
  'https://minnie.untone.uk/kibpfps/kib1.png', 'https://minnie.untone.uk/kibpfps/kib2.png',
  'https://minnie.untone.uk/kibpfps/kib3.png', 'https://minnie.untone.uk/kibpfps/kib4.png',
  'https://minnie.untone.uk/kibpfps/kib5.png',
  'https://minnie.untone.uk/kibpfps/kib6.png', 'https://minnie.untone.uk/kibpfps/kib7.png',
  'https://minnie.untone.uk/kibpfps/kib8.png', 'https://minnie.untone.uk/kibpfps/kib9.png',
  'https://minnie.untone.uk/kibpfps/kib10.png', 'https://minnie.untone.uk/kibpfps/kib11.png',
  'https://minnie.untone.uk/kibpfps/kib12.png', 'https://minnie.untone.uk/kibpfps/kib13.png',
  'https://minnie.untone.uk/kibpfps/kib14.png', 'https://minnie.untone.uk/kibpfps/kib15.png',
  'https://minnie.untone.uk/kibpfps/kib16.png', 'https://minnie.untone.uk/kibpfps/kib17.png',
  'https://minnie.untone.uk/kibpfps/kib18.png', 'https://minnie.untone.uk/kibpfps/kib19.png',
  'https://minnie.untone.uk/kibpfps/kib20.png', 'https://minnie.untone.uk/kibpfps/kib21.png',
  'https://minnie.untone.uk/kibpfps/kib22.png', 'https://minnie.untone.uk/kibpfps/kib23.png',
  'https://minnie.untone.uk/kibpfps/kib24.png', 'https://minnie.untone.uk/kibpfps/kib25.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,
});