// ==UserScript==
// @name        Gartic Phone Avatar Chooser
// @namespace   Violentmonkey Scripts
// @match       *://garticphone.com/*
// @grant       none
// @version     1.2.2
// @author      Der_Floh
// @icon        https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://garticphone.com&size=128
// @homepageURL https://greasyfork.org/de/scripts/468787-gartic-phone-avatar-chooser
// @supportURL  https://greasyfork.org/de/scripts/468787-gartic-phone-avatar-chooser/feedback
// @license     MIT
// @description Adds every Avatar to a Selectionscreen. Now you can Select the Avatar you want
// @downloadURL none
// ==/UserScript==

// jshint esversion: 8

let imgElem;
let parent;
const gLink = "https://garticphone.com";
const container = document.createElement("div");
let runningPick = false;

if (slashCount(window.location.toString()) > 3)
  return;
console.info(`%cRunning: ${GM_info.script.name} v${GM_info.script.version}`, 'color: DodgerBlue');

window.addEventListener("load", () => {
  const center = document.body.querySelector('div[class="jsx-3642485282 center"]');
  const section = center.querySelector('section[class="jsx-3642485282"]');
  parent = section.querySelector('div[class*="avatar"]');
  const button = parent.querySelector("button");
  button.addEventListener("click", () => {
    if (runningPick)
      return;
    container.style.display = "none";
    setTimeout(() => {
      updateImagesClasses(button.className);
      container.style.display = "flex";
    }, 10);
  });
  imgElem = parent.querySelector('span[class*="jsx"]');

  const content = document.getElementById("content");
  const screen = content.querySelector('div[class*="screen"]');

  createImages(screen);
});

function slashCount(str) {
  const regex = /\//g;
  const matches = str.match(regex);
  return matches ? matches.length : 0;
}

async function selectImage(imageSrc) {
  const button = parent.querySelector("button");
  let style = window.getComputedStyle(imgElem);
  let attributeValue = style.getPropertyValue("background-image");

  runningPick = true;
  while (attributeValue != imageSrc) {
    button.click();
    style = window.getComputedStyle(imgElem);
    attributeValue = style.getPropertyValue("background-image");
  }
  updateImagesClasses(imgElem.className);
  runningPick = false;
}

async function updateImagesClasses(jsx) {
  container.className = jsx + " avatar";
  for (const div of container.getElementsByTagName("div"))
    div.className = jsx + " avatar";
  for (const span of container.getElementsByTagName("span"))
    span.className = jsx;
}

async function createImages(screen) {
  const link = gLink + "/images/avatar/";
  let i = 0;
  container.className = imgElem.className + " avatar";
  container.style.position = "absolute";
  container.style.display = "flex";
  container.style.flexWrap = "wrap";
  container.style.width = window.getComputedStyle(screen).width;
  container.style.border = "none";
  container.style.marginTop = "86%";
  screen.appendChild(container);
  let svg;
  do {
    svg = await checkSVGExists(link + i + ".svg");
    if (svg)
      createImage(container, i, imgElem.className);
    i++;
  } while (svg);
}

async function createImage(container, i, jsx) {
  const link = gLink + "/images/avatar/";
  const imageSrc = `url("${link}${i}.svg")`;
  const imgContainer = document.createElement("div");
  imgContainer.className = jsx + " avatar";
  imgContainer.style.display = "flex";
  imgContainer.style.alignItems = "flex-end";
  imgContainer.style.justifyContent = "center";
  imgContainer.style.margin = "2px";
  const image = document.createElement("span");
  image.id = "accountimage-" + i;
  image.className = jsx;
  image.style.backgroundImage = imageSrc;
  image.style.cursor = "pointer";
  image.style.transition = "transform 0.05s";
  image.onclick = () => {
    image.style.transform = "scale(0.9)";
    selectImage(imageSrc);
    setTimeout(() => {
      image.style.transform = "scale(1)";
      setTimeout(() => {
        window.scrollTo({ top: 0, behavior: "smooth" })
      }, 200);
    }, 100);
  };
  imgContainer.appendChild(image);
  container.appendChild(imgContainer);
}

async function fetchSVG(url) {
  try {
    const response = await fetch(url);
    if (!response.ok)
      throw new Error(`HTTP error! Status: ${response.status}`);
    const svgText = await response.text();
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
    return svgDoc.documentElement;
  } catch (error) {
    console.error("Error fetching SVG:", error);
    return;
  }
}

async function checkSVGExists(url) {
  try {
    const response = await fetch(url, { method: "HEAD" });
    return response.ok;
  } catch (error) {
    console.error("Error checking SVG existence:", error);
    return response.error;
  }
}