// ==UserScript==
// @name         Agma.io linesplit controls
// @namespace    eeWynell#4980
// @version      1.1
// @description  Linescript controls for agma.io by Wynell
// @author       eeWynell#4980
// @match        https://agma.io/
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    let controls = {
        getEnabled() {
            return localStorage.getItem("linesplit_controls_enabled") == "true";
        },
        setEnabled(bool) {
            localStorage.setItem("linesplit_controls_enabled", bool)
        },
        generatePoint(x, y) {
            let div = document.createElement("DIV");
            div.style.border = "2px solid white";
            div.style.width = "10px";
            div.style.height = "10px";
            div.style.transform = "translate(-50%, -50%)";
            div.style.position = "fixed";
            div.style.borderRadius = "50%";
            div.style.left = `${x}px`;
            div.style.top = `${y}px`;
            div.style.zIndex = 10 ** 6;
            return div;
        },
        generateWrapper(points) {
            let div = document.createElement("DIV");
            div.id = "linesplit-controls";
            div.style.display = this.getEnabled() ? "block" : "none";
            for (let point of points) div.appendChild(point);
            return div;
        },
        getPoints() {
            let [w, h] = [window.innerWidth, window.innerHeight];
            return [
                this.generatePoint(w / 2, 0),
                this.generatePoint(w, h / 2),
                this.generatePoint(w / 2, h),
                this.generatePoint(0, h / 2)
            ];
        },
        generateSetting(name, checked, on_change) {
            let div = document.createElement("DIV");
            div.className = "role-setting";
            div.id = "linesplit-controls-enabled";
            let label = document.createElement("LABEL");
            let checkbox = document.createElement("INPUT");
            checkbox.type = "checkbox";
            checkbox.onchange = on_change;
            checkbox.checked = checked;
            let span = document.createElement("SPAN");
            span.innerHTML = ` ${name}`;
            let br = document.createElement("BR");
            label.appendChild(checkbox);
            label.appendChild(span);
            div.appendChild(label);
            div.appendChild(br);
            return div;
        },
        updateControls() {
            let points = this.getPoints();
            let wrapper = document.getElementById("linesplit-controls");
            console.log(wrapper);
            document.body.replaceChild(this.generateWrapper(points), wrapper);
        },
        checkboxHandler({ target: { checked } }) {
            this.setEnabled(checked);
            let wrapper = document.getElementById("linesplit-controls");
            wrapper.style.display = checked ? "block" : "none";
        },
        showRoleSettings() {
            if (document.getElementById("linesplit-controls-enabled")) return;
            let role_settings = document.getElementById("roleSettings");
            role_settings.style.display = "block";
            role_settings.appendChild(this.generateSetting("Linesplit controls", this.getEnabled(), this.checkboxHandler.bind(this)));
        },
        createControls() {
            let points = this.getPoints();
            document.body.appendChild(this.generateWrapper(points));
            let [settings_tab] = document.getElementsByClassName("dash-tab-settings");
            settings_tab.addEventListener("click", this.showRoleSettings.bind(this));
        }
    };

    window.addEventListener("resize", controls.updateControls.bind(controls));
    controls.createControls();
})();