import { AeroElement } from "./AeroElement.js";
import { AeroUtilities } from "./AeroUtilities.js";
import { Icon, SVG_inject } from "./Icon.js";
import { WebPage } from "./WebPage.js";
import { WebPageV2 } from "./WebPageV2.js";


// Using ES6 import syntax
import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/highlight.min.js';
//  and it's easy to individually load additional languages
import java from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/java.min.js';
import xml from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/es/languages/xml.min.js';





/*
    Turn this:
        {
        _type: "aero-slide-prime",
        theme: "dark",
        title: `The power of <b>tomorrow</b>`,
        subtitle: "Hi There",
        paragraph: `this is a very 
        long text indeed that spread on multiple lines`,
        background : {
            _type : "pic",
            source : "assets/truc0002.jpg"
        }
    },

    into this:

    <section class="aero-slide-prime aero-theme-dark background-black">
        <div class="text">
            <h1>Say Hello to <span class="emphasis">OCTOFAN</span></h1>
            <h2>The world's first H2-powered multirole heavy duty drone with
                switchable nacelles</h2>
        </div>
        <div class="asset"
            style="background-image: url('assets/aircrafts/freighter/render0x07-low.png');">
        </div>
    </section>
*/



export const LOW_RESOLUTION_TAG = "-low";
export const HIGH_RESOLUTION_TAG = "-high";

export class TextBlockV2 extends AeroElement {

    /** @type {HTMLElement } */
    sectionNode;

    type;

    /**
     * @type{List<TextBlockElement>}
     */
    elements = new Array();

    /** @type{boolean} */
    hasBackgroundImage = false;

    /** @type{boolean} */
    isBackgroundImageLoaded = false;

    /** @type{string} */
    backgroundImagePath;

    /** @type{boolean} */
    hasAssetImage = false;

    /** @type{boolean} */
    isAssetImageLoaded = false;

    /** @type{string} */
    assetImagePath;

    /** @type {HTMLDivElement} */
    assetNode;


    /**
     * 
     * @param {WebPageV2} page 
     * @param {HTMLElement} sources 
     */
    constructor(page, sources) {
        super();

        /* CSS requirements */
        page.css_requireStylesheet("/aero/TextBlock.css");

        /* build nodes */
        this.sectionNode = document.createElement("section");
        this.sectionNode.classList.add("textblock");

        let val;
        this.type = (val = sources.getAttribute("type")) ? val : "std";
        this.sectionNode.setAttribute("type", this.type);

        this.theme = (val = sources.getAttribute("theme")) ? val : "light";
        this.sectionNode.setAttribute("theme", this.theme);

        this.arrangement = (val = sources.getAttribute("arrangement")) ? val : "std";
        this.sectionNode.setAttribute("arrangement", this.arrangement);

        this.numbering = (val = sources.getAttribute("numbering")) ? val : "none";

        /* <id> */
        if (sources.id != undefined) { this.sectionNode.id = sources.id; }
        /* </id> */


        /* <background> */
        if (val = sources.getAttribute("backgroundColor")) {
            switch (val) {
                case "black": this.sectionNode.classList.add("background-black"); break;
                case "white": this.sectionNode.classList.add("background-white"); break;
                case "grey64": this.sectionNode.classList.add("background-grey64"); break;
                case "grey128": this.sectionNode.classList.add("background-grey128"); break;
                case "grey192": this.sectionNode.classList.add("background-grey192"); break;
            }
        }
        else if (val = sources.getAttribute("backgroundGradient")) {
            /* ee */
            page.css_requireStylesheet("/aero/gradient-backgrounds.css");
            this.sectionNode.classList.add("aero-background-gradient-" + val);
        }
        else if (val = sources.getAttribute("backgroundImage")) {
            this.sectionNode.classList.add("background-pic");
            AeroUtilities.loadBackgroundImage(this.sectionNode, val, () => this.render(page));
        }
        /* </background> */


        /* <elements> */
        const numbering = {
            type: this.numbering,
            h1Number: 0,
            h2Number: 0,
            pNumber: 0
        };

        let node = sources.firstChild;
        while (node) {
            let type = node.nodeName.toLowerCase();
            switch (type) {
                case "h1": {
                    numbering.h1Number++;
                    this.elements.push(new TxBkHeader1(page, node, numbering));
                    numbering.h2Number = 0;
                } break;

                case "h2": {
                    numbering.h2Number++;
                    this.elements.push(new TxBkHeader2(page, node, numbering));
                    numbering.pNumber = 0;
                } break;

                case "p": this.elements.push(new TxBkParagraph(page, node)); break;
                case "svg": this.elements.push(new TxBkSVG(page, node)); break;
                case "snippet": this.elements.push(new TxBkCodeSnippet(page, node)); break;
                case "ol": this.elements.push(new TxOrderedBkList(page, node)); break;
                case "ul": this.elements.push(new TxUnorderedBkList(page, node)); break;
                case "links": this.elements.push(new TxBkLinks(page, node)); break;
            }

            node = node.nextSibling;
        }

        this.elements.forEach(element => this.sectionNode.appendChild(element.html_getNode()));
        /* </elements> */
    }


    html_getNode() {
        /* return wrapper node */
        return this.sectionNode;
    }



    /**
     * 
     * @param {WebPage} page 
     */
    render(page) {
        if (!this.isInitialized) {
            this.draw();
            this.isInitialized = true;
        }
        else if (this.isInitialized && page.imageResolution == 1) {
            this.redrawHighRes();
        }
    }

    draw() {

    }

}

export class TextBlockElement {

    constructor(sources) {

    }

}

export class TxBkHeader1 extends TextBlockElement {

    constructor(page, sources, numbering) {
        super(sources);
        const headerNode = document.createElement("h1");
        switch(numbering.type){
            case "none" : {
                headerNode.innerHTML = sources.innerHTML;
            } break;
            case "1.2.3" : {
                const numberNode = document.createElement("span");
                numberNode.innerHTML = `${numbering.h1Number}.`;
                headerNode.appendChild(numberNode);

                const textNode = document.createElement("span");
                textNode.innerHTML = sources.innerHTML;
                headerNode.appendChild(textNode);
            } break;
        }
        
        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
        
        this.headerNode = headerNode;
    }

    html_getNode() { return this.headerNode; }
}


export class TxBkHeader2 extends TextBlockElement {

    constructor(page, sources, numbering) {
        super(sources);
        const headerNode = document.createElement("h2");
        switch(numbering.type){
            case "none" : {
                headerNode.innerHTML = sources.innerHTML;
            } break;
            case "1.2.3" : {
                const numberNode = document.createElement("span");
                numberNode.innerHTML = `${numbering.h1Number}.${numbering.h2Number}.`;
                headerNode.appendChild(numberNode);

                const textNode = document.createElement("span");
                textNode.innerHTML = sources.innerHTML;
                headerNode.appendChild(textNode);
            } break;
        }
        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
        this.headerNode = headerNode;
    }

    html_getNode() { return this.headerNode; }
}


export class TxBkParagraph extends TextBlockElement {

    constructor(page, sources) {
        super(sources);
        const headerNode = document.createElement("p");
        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }
        headerNode.innerHTML = sources.innerHTML;
        this.headerNode = headerNode;
    }

    html_getNode() { return this.headerNode; }
}


export class TxBkSVG extends TextBlockElement {

    constructor(page, sources) {
        super(sources);
        this.pathname = sources.getAttribute("path");

        const wrapperNode = document.createElement("div");
        wrapperNode.classList.add("textblock-pic-svg");
        //if (this.isMobileHideable) { headerNode.classList.add("txbk-mobile-hideable"); }

        let val;
        const width = (val = sources.getAttribute("width")) ? parseInt(val) : 128;
        const height = (val = sources.getAttribute("height")) ? parseInt(val) : 128;
        this.icon = new Icon(this.pathname, { width: width, height: height });
        wrapperNode.appendChild(this.icon.build());

        this.wrapperNode = wrapperNode;
    }

    html_getNode() { return this.wrapperNode; }

}


export class TxBkCodeSnippet extends TextBlockElement {

    static isLanguageLoaded = false;

    /**
     * 
     * @param {WebPageV2} page 
     * @param {HTMLElement} sources 
     */
    constructor(page, sources) {
        super(sources);

        this.sourcePathname = sources.getAttribute("path");

        if (!this.isLanguageLoaded) {

            // Then register the languages you need
            hljs.registerLanguage('java', java);
            hljs.registerLanguage('xml', xml);
            this.isLanguageLoaded = true;
        }

        //page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/default.min.css");
        page.css_requireStylesheet("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/atom-one-dark.css");


        const wrapperNode = document.createElement("div");
        wrapperNode.classList.add("txbk-code-section");

        const windowNode = document.createElement("div");
        windowNode.classList.add("txbk-code-window");
        // windowNode.classList.add("theme-atom-one-dark");

        const preNode = document.createElement("pre");
        //preNode.classList.add("theme-atom-one-dark");

        const spanNode = document.createElement("span");
        //spanNode.classList.add("language-java");
        // spanNode.classList.add("hljs");

        const codeNode = document.createElement("code");
        //codeNode.innerHTML = highlightedCode;


        spanNode.appendChild(codeNode);
        preNode.appendChild(spanNode);
        windowNode.appendChild(preNode);
        wrapperNode.appendChild(windowNode);

        AeroUtilities.getResourceFromOrigin(this.sourcePathname, "text", sourceCode => {
            const highlightedSourceCode = hljs.highlight(sourceCode, { language: 'java' }).value;
            codeNode.innerHTML = highlightedSourceCode;
        })

        this.wrapperNode = wrapperNode;
    }


    html_getNode() { return this.wrapperNode; }


    /**
     * 
     * @param {WebPage} page 
     */
    render(page) {
        /* do nothing */
    }
}



export class TxOrderedBkList extends TextBlockElement {

    constructor(page, sources) {
        super(sources);
        const listNode = document.createElement("ol");
        //listNode.classList.add("textblock-list");
        if (this.isMobileHideable) { listNode.classList.add("square-grid-mobile-hideable"); }
        
        let val;
        this.type = (val = sources.getAttribute("type")) ? val : "1";
        listNode.setAttribute("type", this.type);


        /* <elements> */
        let node = sources.firstChild;
        while (node) {
            let type = node.nodeName.toLowerCase();
            switch (type) {
                case "li": {
                    const itemNode = document.createElement("li")
                    itemNode.innerHTML = node.innerHTML;
                    listNode.appendChild(itemNode);
                } break;
            }
            node = node.nextSibling;
        }
        /* </elements> */

        this.listNode = listNode;
    }

    html_getNode() { return this.listNode; }
}



export class TxUnorderedBkList extends TextBlockElement {

    constructor(page, sources) {
        super(sources);
        const listNode = document.createElement("ul");
        //listNode.classList.add("textblock-list");
        if (this.isMobileHideable) { listNode.classList.add("square-grid-mobile-hideable"); }

       
        /* <elements> */
        let node = sources.firstChild;
        while (node) {
            let type = node.nodeName.toLowerCase();
            switch (type) {
                case "li": {
                    const itemNode = document.createElement("li")
                    itemNode.innerHTML = node.innerHTML;
                    listNode.appendChild(itemNode);
                } break;
            }
            node = node.nextSibling;
        }
        /* </elements> */

        this.listNode = listNode;
    }

    html_getNode() { return this.listNode; }
}





export class TxBkLinks extends TextBlockElement {



    /**
     * @type{List<Object>}
     */
    elements = new Array();

    /**
     * 
     * @param {*} page 
     * @param {HTMLElement} sources 
     */
    constructor(page, sources) {
        super(sources);

        const wrapperNode = document.createElement("div");
        wrapperNode.classList.add("textblock-links");
        if (this.isMobileHideable) { wrapperNode.classList.add("square-grid-mobile-hideable"); }

        /* <elements> */
        let node = sources.firstChild;
        while (node) {
            let type = node.nodeName.toLowerCase();
            switch (type) {
                case "a": this.elements.push(new TxBkAnchor(page, node)); break;
            }
            node = node.nextSibling;
        }

        this.elements.forEach(element => {
            let cellNode = document.createElement("div");
            cellNode.appendChild(element.html_getNode());
            wrapperNode.appendChild(cellNode);
        });
        /* </elements> */

        this.wrapperNode = wrapperNode;
    }

    html_getNode() { return this.wrapperNode; }

}

export class TxBkAnchor {

    /**
     * 
     * @param {HTMLElement} sources 
     */
    constructor(page, sources) {

        this.iconPathname = sources.getAttribute("icon");
        this.url = sources.getAttribute("href");

        this.type = sources.hasAttribute("type") ? sources.getAttribute("type") : "std";
        this.color = sources.hasAttribute("color") ? sources.getAttribute("color") : "std";

        const linkNode = document.createElement("a");
        linkNode.setAttribute("type", this.type);
        linkNode.setAttribute("color", this.color);
        linkNode.classList.add("textblock-link");
        if (this.isMobileHideable) { linkNode.classList.add("square-grid-mobile-hideable"); }

        const picNode = document.createElement("span");
        picNode.classList.add("textblock-link-pic");
        SVG_inject(picNode, this.iconPathname, 24, 24);
        linkNode.appendChild(picNode);

        const textNode = document.createElement("span");
        textNode.classList.add("textblock-link-text");
        textNode.innerHTML = sources.innerHTML;
        linkNode.appendChild(textNode);

        let val;
        if (val = sources.getAttribute("href")) { linkNode.href = val; }
        /* download="proposed_file_name" */
        if (val = sources.getAttribute("client-filename")) { linkNode.download = val; }


        this.linkNode = linkNode;
    }

    html_getNode() { return this.linkNode; }

}