"use strict";

class App {

    lang;
    tls;
    config;
    parserList;
    wrap;
    aside;
    main;

    generateTextElement(type, value) {
        const elem = document.createElement(type);
        elem.textContent = value;
        return elem;
    }

    generateLabelInput(id, labelText, type, value) {

        const output = document.createElement("div");
        output.classList.add("label-input");

        const label = document.createElement("label");
        label.textContent = labelText;
        label.setAttribute("for", id);
        output.appendChild(label);

        const input = document.createElement("input");
        input.id = id;
        input.type = "text";
        input.value = value;
        output.appendChild(input);

        return {'wrap': output, 'input': input};

    }

    async generateSidebar() {

        console.log("hi");
        this.aside.appendChild(this.generateTextElement("h2", "Settings")); // TODO

        // Set up fields
        const instanceLinkArea = this.generateLabelInput("instance-link",
            "Instance link", "url", this.config.settings.instance);
        this.aside.appendChild(instanceLinkArea.wrap);

        const usernameArea = this.generateLabelInput("username",
            "Username", "text", this.config.settings.username);
        this.aside.appendChild(usernameArea.wrap);

        const mailArea = this.generateLabelInput("mail",
            "Mail", "email", this.config.settings.mail);
        this.aside.appendChild(mailArea.wrap);

        const institutionIdArea = this.generateLabelInput("institutionId",
            "Institution ID", "number", this.config.settings.institution_id);
        this.aside.appendChild(institutionIdArea.wrap);

        const parserDiv = document.createElement("div");
        parserDiv.classList.add("label-input");

        const parserLabel = document.createElement("label");
        parserLabel.setAttribute("for", "parserSelect");
        parserLabel.textContent = "Parser";
        parserDiv.appendChild(parserLabel);
        const parserSelect = document.createElement("select");
        parserSelect.id = "parserSelect";

        for (const entry of this.parserList) {
            const opt = document.createElement("option");
            opt.value = entry.title;
            opt.textContent = entry.title;
            if (entry.title === this.config.settings.parser) {
                opt.setAttribute("selected", "selected");
            }
            parserSelect.appendChild(opt);
        }

        parserDiv.appendChild(parserSelect);
        this.aside.appendChild(parserDiv);

        const uploadFolderArea = this.generateLabelInput("upload-folder",
            "Upload directory", "text", this.config.settings.upload_directory);
        this.aside.appendChild(uploadFolderArea.wrap);

        const visibleDivOuter = document.createElement("div");
        visibleDivOuter.classList.add("label-input");
        const visibleLabel = document.createElement("label");
        visibleLabel.setAttribute("for", "visible");
        visibleLabel.textContent = "Publish immediately?";
        visibleDivOuter.appendChild(visibleLabel);

        const visibleDiv = document.createElement("div");
        const visibleSwitch = document.createElement("div");
        visibleSwitch.classList.add("switch");

        const visibleInput = document.createElement("input");
        visibleInput.type = "checkbox";
        if (this.config.settings.visible === true) {
            visibleInput.checked = "checked";
            console.log(visibleInput);
        }
        visibleSwitch.appendChild(visibleInput);

        const visibleSlider = document.createElement("span");
        visibleSlider.classList.add("slider");
        visibleSlider.addEventListener('click', function() {
            visibleInput.checked = !visibleInput.checked;
            console.log(visibleInput);
        });
        visibleSwitch.appendChild(visibleSlider);

        visibleDiv.appendChild(visibleSwitch);
        visibleDivOuter.appendChild(visibleDiv);
        this.aside.appendChild(visibleDivOuter);

    }

    generateMain() {

    }

    render() {

        if (this.config.setup_required === true) {
            wrap.classList.add("one-column");
            this.generateSidebar();
        }
        else {
            this.generateSidebar();
            this.generateMain();
        }

    }

    setupFromApis() {


        const app = this;
        let done = 0;

        function wrapFinish() {
            if (done === 2) {
                app.render();
            }
        }

        window.fetch('/get-settings', {method: 'GET', cache: 'no-cache', credentials: 'same-origin'})
        .then(function(response) { return response.json(); })
        .then(function(elements) {
            app.config = elements;
            done++;
            wrapFinish();
        });
        window.fetch('/list-parsers', {method: 'GET', cache: 'no-cache', credentials: 'same-origin'})
        .then(function(response) { return response.json(); })
        .then(function(elements) {
            app.parserList = elements;
            done++;
            wrapFinish();
        });
    }

    constructor() {

        this.wrap = document.getElementById("wrap");
        this.lang = navigator.language.substring(0, 2)

        this.aside = document.createElement("aside");
        this.main = document.createElement("main");

        this.wrap.appendChild(this.aside);
        this.wrap.appendChild(this.main);

        this.setupFromApis();

    }

}

new App();