// ==UserScript==
// @name         MZ Tactics Selector
// @namespace    essenfc
// @version      0.3
// @description  Adds a dropdown menu to choose overused tactics.
// @author       Douglas Vieira
// @match        https://www.managerzone.com/?p=tactics
// @icon         https://www.google.com/s2/favicons?sz=64&domain=managerzone.com
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

const fontLink = document.createElement("link");
fontLink.href =
  "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
fontLink.rel = "stylesheet";
document.head.appendChild(fontLink);

(function () {
  "use strict";

  let tactics = [];
  const tacticsDataUrl =
    "https://raw.githubusercontent.com/douglasdotv/tactics-selector/main/tactics.json?callback=?";

  window.addEventListener("load", function () {
    const formationContainer = document.getElementById("formation-container");
    formationContainer.style.display = "flex";
    formationContainer.style.alignItems = "center";
    formationContainer.style.justifyContent = "space-between";

    const dropdown = createDropdown();
    const dropdownDescription = createDropdownDescription();
    const hButton = createHButton();

    formationContainer.appendChild(dropdownDescription);
    formationContainer.appendChild(dropdown);
    formationContainer.appendChild(hButton);

    fetchTacticsData()
      .then((data) => {
        tactics = data.tactics;
        addTacticsToDropdown(dropdown, tactics);

        dropdown.addEventListener("change", function () {
          const tactic = this.value;

          let outfieldPlayers = Array.from(
            document.querySelectorAll(
              ".fieldpos.fieldpos-ok.ui-draggable:not(.substitute):not(.substitute.goalkeeper):not(.goalkeeper)"
            )
          );

          const selectedTactic = data.tactics.find(
            (tacticData) => tacticData.name === tactic
          );

          if (selectedTactic) {
            if (outfieldPlayers.length < 10) {
              hButton.click();
              setTimeout(() => rearrangePlayers(selectedTactic.coordinates), 1);
            } else {
              rearrangePlayers(selectedTactic.coordinates);
            }
          }
        });
      })
      .catch((err) => {
        console.error("Couldn't fetch data: ", err);
      });
  });

  function createDropdown() {
    const dropdown = document.createElement("select");
    dropdown.id = "tacticsDropdown";
    dropdown.style.padding = "1px";
    dropdown.style.fontSize = "12px";
    dropdown.style.borderRadius = "1px";

    const placeholderOption = createPlaceholderOption();
    dropdown.appendChild(placeholderOption);

    return dropdown;
  }

  function createPlaceholderOption() {
    const placeholderOption = document.createElement("option");
    placeholderOption.value = "";
    placeholderOption.text = "";
    placeholderOption.disabled = true;
    placeholderOption.selected = true;
    return placeholderOption;
  }

  function createDropdownDescription() {
    const dropdownDescription = document.createElement("span");
    dropdownDescription.textContent = "Select a custom tactic: ";
    dropdownDescription.style.marginRight = "1px";
    dropdownDescription.style.fontFamily = "Montserrat, sans-serif";
    dropdownDescription.style.fontSize = "12px";
    dropdownDescription.style.color = "#000";
    return dropdownDescription;
  }

  function createHButton() {
    const button = document.createElement("button");
    button.textContent = "";
    button.style.margin = "1px";
    button.style.visibility = "hidden";

    button.addEventListener("click", function () {
      const presetDropdown = document.getElementById("tactics_preset");
      presetDropdown.value = "4-4-2";
      presetDropdown.dispatchEvent(new Event("change"));
    });

    return button;
  }

  async function fetchTacticsData() {
    const response = await fetch(tacticsDataUrl);
    return await response.json();
  }

  function addTacticsToDropdown(dropdown, tactics) {
    for (const tactic of tactics) {
      const option = document.createElement("option");
      option.value = tactic.name;
      option.text = tactic.name;
      dropdown.appendChild(option);
    }
  }

  function rearrangePlayers(coordinates) {
    const outfieldPlayers = Array.from(
      document.querySelectorAll(
        ".fieldpos.fieldpos-ok.ui-draggable:not(.substitute):not(.goalkeeper):not(.substitute.goalkeeper)"
      )
    );

    for (let i = 0; i < outfieldPlayers.length; ++i) {
      outfieldPlayers[i].style.left = coordinates[i][0] + "px";
      outfieldPlayers[i].style.top = coordinates[i][1] + "px";
    }
  }
})();