// ==UserScript==
// @name        Gartic Phone Avatar Chooser
// @namespace   Violentmonkey Scripts
// @match       *://garticphone.com/*
// @grant       none
// @version     1.0
// @author      Der_Floh
// @icon        https://www.google.com/s2/favicons?domain=garticphone.com
// @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 container = document.createElement("div");

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"]');
  imgElem = parent.querySelector('span[class*="jsx"]');

  const content = document.getElementById("content");
  const screen = content.querySelector('div[class="jsx-2826209538 jsx-3405692390 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");

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

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 = "https://garticphone.com/images/avatar/";
  let i = 0;
  container.className = imgElem.className + " avatar";
  container.style.position = "relative";
  container.style.display = "flex";
  container.style.flexWrap = "wrap";
  container.style.width = window.getComputedStyle(screen).width;
  container.style.border = "none";
  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 = "https://garticphone.com/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.backgroundSize = "cover";
  image.style.backgroundRepeat = "no-repeat";
  image.style.backgroundPosition = "center bottom";
  image.style.width = "156px";
  image.style.height = "182px";
  image.style.cursor = "pointer";
  image.style.transition = "transform 0.05s";
  image.addEventListener("click", () => {
    image.style.transform = "scale(0.9)";
    selectImage(imageSrc);
    setTimeout(() => {
      image.style.transform = "scale(1)";
      setTimeout(() => window.scrollTo({ top: 0, behavior: "smooth" }), 300);
    }, 300);
  });
  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;
  }
}