// ==UserScript==
// @name         Grepolis Resources Manager
// @version      0.4_ALPHA
// @include		 /http[s]{0,1}://[a-z]{2}[0-9]{1,2}\.grepolis\.com/game*/
// @include		 https://*.forum.grepolis.com/*
// @require		 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @description  A little handy script to help with resource management and more
// @author       MajorOrbital
// @copyright    2020+
// @grant        unsafeWindow
// @grant        GM_addStyle
// @namespace https://greasyfork.org/users/451401
// @downloadURL none
// ==/UserScript==

//TODO: fix dropdown for selecting levels

// GM-API?
GM = (typeof GM_info === 'object');
var uw = unsafeWindow;
const max_levels = {
    main: 25,
    hide: 10,
    place: 1,
    lumber: 40,
    stoner: 40,
    ironer: 40,
    market: 30,
    docks: 30,
    barracks: 30,
    wall: 25,
    storage: 35,
    farm: 45,
    academy: 36,
    temple: 30
};
GM_addStyle(`
#GRM_window{background-color: #ffe2a2;
    display: block;
    height: 550px;
    width: 780px;
    z-index: 1100;
    position: absolute;
    top: 100px;
    left: 30vw;
    border: 2px black solid
}
#GRM_toolbar{
    height: 30px;
    border-bottom: 2px black solid;
}
#GRM_toolbar_list{
    list-style-type: none;
    margin: 0;
    padding-top:3px;
    padding-left: 1px;
    overflow: hidden;
    top: 10px;
}
#GRM_title{
    padding-top: 3px;
    float: left;
    width: 40%;
    text-align: left;
}
.GRM_toolbar_item{
    height: 25px;
    float: left;
    width: 27%;
    text-align: center;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    margin: 1px
}
#GRM_close{
    padding-top: 5px;
    float: left;
}
#GRM_close_img{
    margin-left: 10px;
}
.GRM_building_image{
    height: 40px;
    width: 40px;
    letter-spacing: -1px;
    margin: 0;
    display: inline-grid;
}

.GRM_building_level{
    position: relative;
    bottom: -25px;
    right: -10px;
    color: white;
    font-weight: bolder;
}

.GRM_selector{
    height: 40px;
    width: 30px;
    top: 10px;
    display: inline;
    position: relative;
}

.GRM_input{
    width: 30px;
}

input.invalid{
	border: 2px solid red;
    background-color: rgba(128,0,0,0.3)
}

input.valid{
	border: 2px solid green;
    background-color: rgba(0,128,0,0.3)
}
`);

function initializeGRMWindow() {
    var left = document.querySelector("body").clientWidth;
    $("body").append(`
<div id="GRM_window">
    <div id="GRM_toolbar">
        <ul id="GRM_toolbar_list">
            <li class="GRM_toolbar" id="GRM_title">Grepolis Resources Manager</li>
            <li class="GRM_toolbar_item" id="GRM_builder">City Manager</li>
            <li class="GRM_toolbar_item" id="GRM_resources">Resource Manager</li>
            <li id="GRM_close"><img id="GRM_close_img" src="https://i.imgur.com/cceOkEu.png"></li>
        </ul>
    </div>
    <div id="GRM_buildings">
        <label id="city_name"></label>
        <table>
            <tr>
                <th colspan="4" id="GRM_city_name">
                </th>
            </tr>
            <tr>
                <td colspan="4" id="GRM_main" class="building">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/main.png');">
                            <span class="GRM_building_level" id="GRM_main_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_main_level_pick">
                            <input type="number" min="0" step="1" class="GRM_input valid" value="1" id="GRM_main_input"
                                   name="main_level">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_lumber">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/lumber.png');">
                            <span class="GRM_building_level" id="GRM_lumber_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_lumber_selector"><input type="number" min="0" step="1"
                                                                                  class="GRM_input valid"
                                                                                  value="1" id="GRM_lumber_input"
                                                                                  name="lumber_level"></div>
                    </div>
                </td>
                <td id="GRM_farm">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/farm.png');">
                            <span class="GRM_building_level" id="GRM_farm_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_lumber_farm"><input type="number" min="0" step="1"
                                                                              class="GRM_input valid"
                                                                              value="1" id="GRM_farm_input"
                                                                              name="farm_level"></div>
                    </div>
                </td>
                <td id="GRM_stoner">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/stoner.png');">
                            <span class="GRM_building_level" id="GRM_stoner_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_stoner_selector"><input type="number" min="0" step="1"
                                                                                  class="GRM_input valid"
                                                                                  value="1" id="GRM_stoner_input"
                                                                                  name="stoner_level"></div>
                    </div>
                </td>
                <td id="GRM_storage">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/storage.png');">
                            <span class="GRM_building_level" id="GRM_storage_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_storage_selector"><input type="number" min="0" step="1"
                                                                                   class="GRM_input valid" value="1"
                                                                                   id="GRM_storage_input"
                                                                                   name="storage_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_ironer">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/ironer.png');">
                            <span class="GRM_building_level" id="GRM_ironer_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_ironer_selector"><input type="number" min="0" step="1"
                                                                                  class="GRM_input valid"
                                                                                  value="1" id="GRM_ironer_input"
                                                                                  name="ironer_level"></div>
                    </div>
                </td>
                <td id="GRM_barracks">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/barracks.png');">
                            <span class="GRM_building_level" id="GRM_barracks_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_barracks_selector"><input type="number" min="0" step="1"
                                                                                    class="GRM_input valid" value="1"
                                                                                    id="GRM_barracks_input"
                                                                                    name="barracks_level"></div>
                    </div>
                </td>
                <td id="GRM_temple">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/temple.png');">
                            <span class="GRM_building_level" id="GRM_temple_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_temple_selector"><input type="number" min="0" step="1"
                                                                                  class="GRM_input valid"
                                                                                  value="1" id="GRM_temple_input"
                                                                                  name="temple_level"></div>
                    </div>
                </td>
                <td id="GRM_market">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/market.png');">
                            <span class="GRM_building_level" id="GRM_market_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_market_selector"><input type="number" min="0" step="1"
                                                                                  class="GRM_input valid"
                                                                                  value="1" id="GRM_market_input"
                                                                                  name="market_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="GRM_docks">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/docks.png');">
                            <span class="GRM_building_level" id="GRM_docks_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_docks_selector"><input type="number" min="0" step="1"
                                                                                 class="GRM_input valid"
                                                                                 value="1" id="GRM_docks_input"
                                                                                 name="docks_level"></div>
                    </div>
                </td>
                <td id="GRM_academy">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/academy.png');">
                            <span class="GRM_building_level" id="GRM_academy_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_academy_selector"><input type="number" min="0" step="1"
                                                                                   class="GRM_input valid" value="1"
                                                                                   id="GRM_academy_input"
                                                                                   name="academy_level"></div>
                    </div>
                </td>
                <td id="GRM_wall">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/wall.png');">
                            <span class="GRM_building_level" id="GRM_wall_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_wall_selector"><input type="number" min="0" step="1"
                                                                                class="GRM_input valid"
                                                                                value="1" id="GRM_wall_input"
                                                                                name="wall_level"></div>
                    </div>
                </td>
                <td id="GRM_hide">
                    <div class="GRM_container">
                        <div class="GRM_building_image"
                             style="background-image: url('https://gpnl.innogamescdn.com/images/game/main/hide.png');">
                            <span class="GRM_building_level" id="GRM_hide_level"></span>
                        </div>
                        <div class="GRM_selector" id="GRM_hide_selector"><input type="number" min="0" step="1"
                                                                                class="GRM_input valid"
                                                                                value="1" id="GRM_hide_input"
                                                                                name="hide_level"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" id="GRM_special_1">
                    <div class="GRM_building_image GRM_special" id="GRM_special_1_background"></div>
                </td>
                <td colspan="2" id="GRM_special_2">
                    <div class="GRM_building_image GRM_special" id="GRM_special_2_background"></div>
                </td>
            </tr>
        </table>
    </div>
</div>`);
    $('#GRM_window').draggable();
    var close = document.querySelector("#GRM_close_img");
    close.addEventListener("click", function () {
        $("#GRM_window").css("display", "none");
    });
    $(".GRM_input").each(function () {
        $(this).on('input', function () {
            var input = $(this);
            var value = input.val();
            var attr_name = input.attr('name');
            var name = attr_name.substring(0, attr_name.length - 6);
            var max = getMaxLevel(name);
            let int = parseInt(value);
            console.log(max);
            if (isNaN(parseInt(int)) || int < 0 || int > max){
                input.removeClass("valid").addClass("invalid");
            } else {
                input.removeClass("invalid").addClass("valid");
            }
            updateModel();
        });
    });
}

function getMaxLevel(name) {
    switch (name) {
        case "main":
            return max_levels.main;
        case "hide":
            return max_levels.hide;
        case "place":
            return max_levels.place;
        case "lumber":
            return max_levels.lumber;
        case "stoner":
            return max_levels.stoner;
        case "ironer":
            return max_levels.ironer;
        case "market":
            return max_levels.market;
        case "docks":
            return max_levels.docks;
        case "barracks":
            return max_levels.barracks;
        case "wall":
            return max_levels.wall;
        case "storage":
            return max_levels.storage;
        case "farm":
            return max_levels.farm;
        case "academy":
            return max_levels.academy;
        case "temple":
            return max_levels.temple;
        default:
            return 1;
    }
}

function updateModel() {
    return;
}

function openGRMWindow() {
    var grmWindow = document.querySelector("#GRM_window");
    if (grmWindow === null) {
        initializeGRMWindow();
        openGRMWindow();
        return;
    }
    //console.log(uw.ITowns.getCurrentTown());
    fillGRMWindow(uw.ITowns.getCurrentTown());
    $("#GRM_window").css("display", "block");
}

function fillGRMWindow(town) {
    $("#GRM_city_name").text(`${town.getName()}`)
    const buildings = town.getBuildings().getLevels();
    $("#GRM_main_level").text(`${buildings.main}`);
    $("#GRM_hide_level").text(`${buildings.hide}`);
    $("#GRM_place_level").text(`${buildings.place}`);
    $("#GRM_lumber_level").text(`${buildings.lumber}`);
    $("#GRM_stoner_level").text(`${buildings.stoner}`);
    $("#GRM_ironer_level").text(`${buildings.ironer}`);
    $("#GRM_market_level").text(`${buildings.market}`);
    $("#GRM_docks_level").text(`${buildings.docks}`);
    $("#GRM_barracks_level").text(`${buildings.barracks}`);
    $("#GRM_wall_level").text(`${buildings.wall}`);
    $("#GRM_storage_level").text(`${buildings.storage}`);
    $("#GRM_farm_level").text(`${buildings.farm}`);
    $("#GRM_academy_level").text(`${buildings.academy}`);
    $("#GRM_temple_level").text(`${buildings.temple}`);
    var json_data = uw.ITowns.getCurrentTown().getBuildings().getBuildings();
    var result = [];

    var counter = 0;
    for (var i in json_data) {
        if (counter !== 14) {
            counter++;
            continue;
        }
        result.push([i, json_data [i]]);
    }

    var special1 = getSpecialBuilding(result.slice(0, 4));
    var special2 = getSpecialBuilding(result.slice(4));


    var specialImage1 = special1 === null ? 'url(https://i.imgur.com/ScMZ4ns.png)' : `url('https://gpnl.innogamescdn.com/images/game/main/${special1}.png')`;
    var specialImage2 = special2 === null ? 'url(https://i.imgur.com/L26ZuJ4.png)' : `url('https://gpnl.innogamescdn.com/images/game/main/${special2}.png')`;


    $("#GRM_special_1_background").css("background-image", specialImage1);
    $("#GRM_special_2_background").css("background-image", specialImage2);
}

function getSpecialBuilding(specialList) {
    var specialBuilding = null;
    for (let i in specialList) {
        if (specialList[i][1] === 1) return specialList[i][0];
    }
    return null;
}

function addMenuItem() {
    $("#ui_box > div.nui_main_menu > div.middle > div.content > ul").append(
        `<li id="GRM_Button">
        <span class="content_wrapper">
            <span class="button_wrapper">
                <span class="button">
                    <span class="icon" style="background: url(&quot;https://s19.directupload.net/images/200222/6wtpwmkp.png&quot;) no-repeat;"></span>
                </span>
            </span>
            <span class="name_wrapper">
                <span class="name">GRM</span>
            </span>
        </span>
    </li>`);
    var li = document.querySelector("#GRM_Button");
    li.addEventListener("click", openGRMWindow);
}


function startup() {
    'use strict';
    addMenuItem();
    //console.log(uw.GameModels.TownIdList());

};

startup();