const view = require("../../html/sites/selectWords.html");
import {UserMenuAction, UserSite} from "cordova-sites-user-management/dist/client";
import {NavbarFragment} from "cordova-sites/dist/client/js/Context/Menu/NavbarFragment";
import {App} from "cordova-sites/dist/client/js/App";
import {DataManager} from "cordova-sites/dist/client/js/DataManager";
import {ViewHelper} from "js-helper/dist/client/ViewHelper";
import {MenuSite} from "cordova-sites/dist/client";

export class SelectWordsSite extends MenuSite{
    private stats: any;
    private words: any;

    constructor(siteManager) {
        super(siteManager, view);
        this.addDelegate(new UserSite(this, "select-words"))
    }

    async onConstruct(args) {
        let res = await super.onConstruct(args);
        this.stats = (await DataManager.load("words"))["result"];
        this.words = this.stats["wordsToCheck"];
        console.log(this.stats);
        return res;
    }

    async onViewLoaded() {
        let res = super.onViewLoaded();
        this.findBy("#not-checked").appendChild(document.createTextNode(this.stats["wordsNotChecked"]));
        this.findBy("#checked").appendChild(document.createTextNode(this.stats["wordsChecked"]));
        this.findBy("#not-sure").appendChild(document.createTextNode(this.stats["wordsUnsure"]));
        this.findBy("#deleted").appendChild(document.createTextNode(this.stats["wordsDeleted"]));
        this.findBy("#unused").appendChild(document.createTextNode(this.stats["wordsNotUsed"]));

        let template = this.findBy("#word-template");
        template.id = null;
        template.remove();

        let container = this.findBy("#word-container");

        let numWords = this.words.length;
        for (let i = 0; i < numWords; i++) {
            let wordElement = template.cloneNode(true);
            wordElement.dataset["id"] = -1;
            this.setWord(wordElement, this.words[i]);
            container.appendChild(wordElement);

            wordElement.querySelector(".button-ok").addEventListener("click", async () => {
                let newWord = (await DataManager.send("checkWord", {
                    "wordId":wordElement.dataset["id"],
                    "action":"1"
                }))["result"];
                this.setWord(wordElement, newWord[0]);
            });

            wordElement.querySelector(".button-unsure").addEventListener("click", async () => {
                let newWord = (await DataManager.send("checkWord", {
                    "wordId":wordElement.dataset["id"],
                    "action":"2"
                }))["result"];
                this.setWord(wordElement, newWord[0]);
            });

            wordElement.querySelector(".button-delete").addEventListener("click", async () => {
                let newWord = (await DataManager.send("checkWord", {
                    "wordId":wordElement.dataset["id"],
                    "action":"3"
                }))["result"];
                this.setWord(wordElement, newWord[0]);
            });
        }
        return res;
    }

    setWord(wordElement, word){
        ViewHelper.removeAllChildren(wordElement.querySelector(".word")).appendChild(document.createTextNode(word["word"]));
        wordElement.dataset["id"] = word["id"];
    }
}

App.addInitialization(app => {
    NavbarFragment.defaultActions.push(new UserMenuAction("select-words", "select-words", () => {
        app.startSite(SelectWordsSite);
    }));
});