// ==UserScript==
// @name         MZ Axis
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Based on the Murder script, add copy-paste functions and move the coordinate axis to the center field.
// @author       jrcl
// @match        https://www.managerzone.com/?p=tactics*
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    var coordsContainerAux = document.getElementById('formation-container');
    var input = '<input id=\"**id**\" type=\"text\" style=\"width: 20px\" value=\"**val**\">';
    var _x = '--';
    var _y = '--';

    var formation = [];

    if(allowed()) {
        var coordsContainer = document.getElementById('formation-container');
        var m = "<div><span style=\"font-weight: 600\">" + allowed() + "</span></div>";
        wrapCoordinates();
        var node = createElementFromHTML(m);
        coordsContainer.appendChild(node);
    }
    else if(isSoccer()) {
        var murder = 'murder';
        var test = window.btoa(murder);
        var test2 = window.atob(test);
        enableActionsForAllTabs();
        enableActionForAltTactics();
        addEventsToPlayers();
        drawCoordinates();
        document.addEventListener("keydown", setKeys);
        document.addEventListener("click", clickEvent);
    }

    function addEventsToPlayers() {
        var checkExist = setInterval(function() {
            if (document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable').length) {
                var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable');
                for (var i = 0; i < players.length; ++i) {
                    players[i].addEventListener('click', setCoordsLabel, false);
                    players[i].addEventListener('keydown', setCoordsLabel, false);
                }
                clearInterval(checkExist);
            }
        }, 1000);

    }

    function setCoordsLabel(player) {
        getOffset(player.path[1]);
        drawCoordinates();
    }

    function getOffset( el ) {
        _y = 101 - (el.offsetTop - 54);
        _x = el.offsetLeft - 97;
    }

    function drawCoordinates() {
        let coord = document.getElementById('divCoords');
        if(coord) {
            coord.parentElement.removeChild(coord);
        }

        var coordsContainer = document.getElementById('formation-container');
        var divCoords = "<div id=\"divCoords\"><span style=\"font-weight: 600\">Player position: **coords**</span>"+
            //"<span><input id=\"copyBtn\" type=\"button\" value=\"Copy\" onclick=\"copyFormation();\"/></span>" +
            "&nbsp;<span><button id=\"copyBtn\" onclick=\"copyFormation()\">Copy</button></span>" +
            "&nbsp;<span><button id=\"pasteBtn\" onclick=\"pasteFormation()\">Paste</button></span>" +
            // "<span><textarea id=\"txtFormation\" name=\"textarea\"></textarea></span>" +
            "</div>";
        wrapCoordinates();
        var node = createElementFromHTML(divCoords.replace('**coords**', _x + _y));
        coordsContainer.appendChild(node);
        applyCoordinates();

        document.getElementById("copyBtn").onclick = copyFormation;
        document.getElementById("pasteBtn").onclick = pasteFormation;

    }

    function copyFormation() {
        formation = [];
        var player = document.querySelectorAll('.fieldpos.fieldpos-ok.ui-draggable:not(.substitute):not(.goalkeeper)');
        for (let i = 0; i < player.length; i++) {
            formation.push([Number((player[i].style.left).slice(0,-2)), Number((player[i].style.top).slice(0,-2))]);
        }

        // order by top desc and left asc
        formation = formation.sort(function(a,b) { if (b[1] == a[1]) return a[0] - b[0]; else return b[1] - a[1]; })

        let txtCoord = "";
        for (let coord of formation) {
            txtCoord += (coord[0] - 97) + "," + (155 - coord[1]) + '\n';
        }

        navigator.clipboard.writeText(txtCoord)
            .then(() => {
            console.log('Formation copied to the clipboard');
            alert('Formation copied to the clipboard');
        })
            .catch(err => {
            console.error('Error copying to the clipboard:', err);
        })
        console.log(txtCoord);
    }

    function pasteFormation() {
        navigator.clipboard.readText()
          .then(text => {
            console.log('Clipboard text:', text)
            // is xml content?
            if (text.search("xml") != -1) {
                // parse clipboard to xml file
                console.log('Cartesian coordinate system from XML file');
                let parser = new DOMParser();
                let xmlDoc = parser.parseFromString(text,"text/xml");
                
                formation = [];
                let pos = xmlDoc.getElementsByTagName("Pos")
                for (var i = 1; i < pos.length; i++) {
                    formation.push([Number(pos[i].getAttribute("x")) - 7, Number(pos[i].getAttribute("y")) - 9]);
                }

                formation = formation.sort(function(a,b) { if (b[1] == a[1]) return a[0] - b[0]; else return b[1] - a[1]; })
                setFormation();
            } else if (text.trim().split('\n').length == 10) { // is there 10 coord?
                console.log('Cartesian coordinate system from Clipboard');
                let coorXY = text.trim().split('\n')

                formation = [];
                for (let pair of coorXY) {
                    let [xAxis,yAxis] = pair.split(',');
                    formation.push([Number(xAxis) + 97, 155 - Number(yAxis)]);
                }

                formation = formation.sort(function(a,b) { if (b[1] == a[1]) return a[0] - b[0]; else return b[1] - a[1]; })
                setFormation();
            } else if (formation.length == 10) {
                console.log('Cartesian coordinate system from internal var');
                setFormation();
            } else {
                console.log("Nothing to do");
            }


          })
          .catch(err => {
            console.error('Error reading from the clipboard:', err)
          })
    }

    function setFormation() {
        let player = document.querySelectorAll('.fieldpos.fieldpos-ok.ui-draggable:not(.substitute):not(.goalkeeper)');

        if (formation.length == player.length) {
            // get an order
            let oldFormation = [];
            for (let i = 0; i < player.length; i++) {
                oldFormation.push([Number((player[i].style.left).slice(0,-2)), Number((player[i].style.top).slice(0,-2)), i]);
            }

            oldFormation = oldFormation.sort(function(a,b) { if (b[1] == a[1]) return a[0] - b[0]; else return b[1] - a[1]; })

            for (let i = 0; i < formation.length; i++) {
                player[oldFormation[i][2]].style.left = formation[i][0] + 'px';
                player[oldFormation[i][2]].style.top = formation[i][1] + 'px';
            }
            alert('Formation successfully copied');
            formation = []; // empty formation
        }
    }

    function createElementFromHTML(htmlString) {
        var div = document.createElement('div');
        div.innerHTML = htmlString.trim();

        // Change this to div.childNodes to support multiple top-level nodes
        return div.firstChild;
    }

    function applyCoordinates() {
        var inpX = document.getElementById('inputX');
        var inpY = document.getElementById('inputY');

        inpX.addEventListener('keyup', setPlayerPosition, false);
        inpY.addEventListener('keyup', setPlayerPosition, false);
    }

    function setPlayerPosition(input) {
        var c = input.currentTarget.id === 'inputX' ? 'x' : 'y';
        let selectedInput = c === 'x' ? document.getElementById('inputX') : document.getElementById('inputY');
        //get selected player
        var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
        var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
        if(players.length) {
            let xVal = c === 'x' ? input.currentTarget.value : document.getElementById('inputX').value;
            let yVal = c === 'y' ? input.currentTarget.value : document.getElementById('inputY').value;

            if(isInRange(c == 'x' ? xVal : yVal, c)) {
                removeBorder(selectedInput);
                players[0].style.left = (parseInt(xVal) + 97) + "px";
                players[0].style.top = (101 - parseInt(yVal) + 54) + "px";
            }
            else {
                addBorder(selectedInput);
            }
        }
        else if(playerCollision.length) {
            let xVal = c === 'x' ? input.currentTarget.value : document.getElementById('inputX').value;
            let yVal = c === 'y' ? input.currentTarget.value : document.getElementById('inputY').value;

            if(isInRange(c == 'x' ? xVal : yVal, c)) {
                removeBorder(selectedInput);
                playerCollision[0].style.left = (parseInt(xVal) + 97) + "px";
                playerCollision[0].style.top = (101 - parseInt(yVal) + 54) + "px";
            }
            else {
                addBorder(selectedInput);
            }
        }
    }

    function wrapCoordinates() {
        var inpX = input.replace('**id**','inputX').replace('**val**', _x);
        var inpY = input.replace('**id**','inputY').replace('**val**', _y);
        _x = '<span style=\"color: green\"> X: </span>' + inpX;
        _y = '<span style=\"color: blue\"> Y: </span>' + inpY;
    }

    function isInRange(number, coordinate) {
        if(!isNaN(number)) {
            var integer = parseInt(number);
            if(coordinate == 'x') {
                return integer <= 96 && integer >= -96;
            }
            else if(coordinate == 'y') {
                return integer <= 101 && integer >= -157;
            }
            else {
                return false;
            }
        }
        else {
            return false;
        }
    }

    function setKeys(key) {
        if((key.keyCode === 37 || key.keyCode === 38 || key.keyCode === 39 || key.keyCode === 40)
           && (key.currentTarget.activeElement.localName != 'input')) {

            var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
            var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
            //player selected with or without collision
            if(players.length) {
                _y = 101 - (players[0].offsetTop - 54);
                _x = players[0].offsetLeft - 97;
            }
            else if (playerCollision.length) {
                _y = 101 - (playerCollision[0].offsetTop - 54);
                _x = playerCollision[0].offsetLeft - 97;
            }
            else {
                _y = '--';
                _x = '--';
            }

            drawCoordinates();
        }
    }

    function clickEvent(ev) {
        if(ev.currentTarget.activeElement.localName === 'select') {
            return false;
        }
        var players = document.getElementsByClassName('fieldpos fieldpos-ok ui-draggable ui-selected');
        var playerCollision = document.getElementsByClassName('fieldpos ui-selected fieldpos-collision');
        if(!players.length && !playerCollision.length) {
            _y = '--';
            _x = '--';
            drawCoordinates();
        }
    }

    function enableActionsForAllTabs() {
        var tabs = document.getElementsByClassName('ui-state-default ui-corner-top');
        let ttta = document.getElementById('ttta');
        let tttb = document.getElementById('tttb');
        ttta.addEventListener('click',restart);
        tttb.addEventListener('click',restart);

        for (var i = 0; i < tabs.length; ++i) {
            tabs[i].addEventListener("click", function() {
                addEventsToPlayers();
                enableActionForAltTactics();
            });
        }
    }

    function enableActionForAltTactics() {
        var altTactics = document.getElementById('formation_select');
        altTactics.addEventListener('change',tacticChange);
    }

    function tacticChange() {
        let resetBtn = document.getElementById('reset_formation');
        let copyBtn = document.getElementById('replace_starting_formation');

        resetBtn.addEventListener('click',restart);
        copyBtn.addEventListener('click',restart);

        restart();
    }

    function restart() {
        _y = '--';
        _x = '--';
        addEventsToPlayers();
        drawCoordinates();
    }

    function addBorder(input) {
        input.style.border = 'solid 4px red';
    }
    function allowed(){let G=!1,b=[{u:"ZGllZ29jYXBhbm8=",m:"VXN0ZWQgbm8gdGllbmUgcGVybWl0aWRvIHVzYXIgbGEgaGVycmFtaWVudGEgZGFkbyBxdWUgcG9zZWUgbeFzIGRlIHVuYSBjdWVudGEu"},{u:"bWF4d2VsbHNtYXJ0ODE=",m:"RWwgc2lzdGVtYSBoYSBkZXRlY3RhZG8gcXVlIHVzdGVkIGVzIGRlbWFzaWFkbyB0cmFtcG9zbyBwYXJhIHVzYXIgZXN0YSBoZXJyYW1pZW50YS4="},{u:"bHVra2s0MQ==",m:"VXN0ZWQgZXMgdW4gdHJhbXBvc28geSBubyB0aWVuZSBwZXJtaXRpZG8gdXNhciBsYSBoZXJyYW1pZW50YS4="},{u:"ZGFya2xpbmU=",m:"RWwgc2lzdGVtYSBoYSBkZXRlY3RhZG8gcXVlIHVzdGVkIGVzIHVuIHBlbG90dWRvIHkgbm8gdGllbmUgcGVybWl0aWRvIHVzYXIgbGEgaGVycmFtaWVudGEu"},{u:"a2luZXNpbzEw",m:"TG9zIHBlbG90dWRvcyBjb21vIHZvcyBubyB0aWVuZW4gcGVybWl0aWRvIHVzYXIgbGEgaGVycmFtaWVudGEgcG9yIGhhYmVyIGFycnVpbmFkbyBlbCBmb3JvLg=="},{u:"bXVyZGVy",m:"TG9zIHBlbG90dWRvcyBjb21vIHZvcyBubyB0aWVuZW4gcGVybWl0aWRvIHVzYXIgbGEgaGVycmFtaWVudGEgcG9yIGhhYmVyIGFycnVpbmFkbyBlbCBmb3JvLg=="}],V=document.getElementById("header-username").textContent;for(var g=0;g<b.length;++g)window.atob(b[g].u)===V&&(G=window.atob(b[g].m));return G}
    function removeBorder(input) {
        input.style.border = null;
    }

    function isSoccer() {
        let response = false;
        let sport = document.getElementById('tactics_box');
        for(var i = 0; i < sport.classList.length; ++i) {
            if(sport.classList[i] == 'soccer') {
                response = true;
            }
        }
        return response;
    }

})();