import AMenu from '/js/libs/js-AMenu.js'
import ALayout from '/js/libs/js-ALayout.js'
import ADropDown from '/js/libs/js-ADropDown.js'

//var asyncStyleSheets = [
//    'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap',
//    '/css/atg-font/atg-admin-font.css'
//];
//window.app.loadCSS(asyncStyleSheets);

class AsyncLayout extends ALayout {
    constructor() {
        super();
        this.layMNav = `<div class="m-header">
                            <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
                                <img src="/images/logo/logo.jpg" />
                                <span class="d-f no-wrap ml-2"><b class="lg">VIN</b> <b class="lg lg1">FONT</b></span>
                                <a href="javascript:void(0)" class="hd-close">
                                    <i class="atg atg-x"></i>
                                </a>
                            </a>
                            <div class="nav-mainmenu d-f f-c">
                            </div>
                        </div>`;
    }
    _createFHeader() {
        document.body.insertAdjacentHTML("afterbegin", this.layMNav);
        //document.body.insertAdjacentHTML("afterbegin", this.fHeader);
        //var h = document.querySelector("#fHeader .nav-mainmenu");
        //var h2 = document.querySelector(".m-header");
        //var he2 = h2.querySelector(".nav-mainmenu");
        //var r = document.querySelector("#header");
        //r.querySelector(".nav-mainmenu").childNodes.forEach(el => {
        //    he2.appendChild(el.cloneNode(true));
        //    h.appendChild(el.cloneNode(true));
        //})
    }
    dispose() {
        this.isLoaded = false;
        var h = document.getElementById("header");
        var f = document.getElementById("footer");
        var h1 = document.getElementById("fHeader");
        document.querySelector(".m-header").remove();
        f.removeAll();
        h.removeAll();
        h1.remove();
        window.app.removeSytemEventParent(window.app.lName);
        window.app.removeCustomEventParent(window.app.lName);
        super.dispose();
    }
    renderMenu() {
        this.isLoaded = true;
        this._createFHeader();
        this.dpLang = new ADropDown();
        this.dpLang.bindDropDown(document.querySelector(".langnav"));
        this.a1 = new AMenu("#header .navmain", ".m-header", document.querySelectorAll(".ico-menu"), true);
        
       // window.app.initNavs("Async");
       // var hHeader = document.getElementById("header").clientHeight;
       // var fHeader = document.getElementById("fHeader");

       // if (window.getOS() == "iOS") {
       //     fHeader.classList.add("ios");
       // }
       // const idE0 = window.app.on("App_Scrolling", (scrollY) => {
       //     if (scrollY > hHeader && !fHeader.classList.contains("show")) {
       //         fHeader.classList.add("show");

       //     }
       //     if (scrollY < hHeader && fHeader.classList.contains("show")) {
       //         fHeader.classList.remove("show");
       //     }
       // });
       // this.addCustomEvent(idE0, window.app, "Async");
       // var a1 = new AMenu("#header .nav-mainmenu", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true);
       // this.listAObject.add(a1);
       // var a2 = new AMenu("#fHeader .nav-mainmenu", null, null);
       // this.listAObject.add(a2);
       // const idE1 = window.app.on("redirect_page", (e) => {
       //     a1.changeActive();
       //     a2.changeActive();
       // });
       // this.addCustomEvent(idE1, window.app, "Async");
       // const f = function (e) {
       //     window.app.initNavApp(window.GetAbsoluteURL("/Search"));
       // }
       // const btnMHeader = document.getElementById("btnMHeader");
       //// btnMHeader.addEventListener(this.eventName, f);
       // this.addSystemEvent(this.eventName, btnMHeader, f);
    }
}
window.ALayout.set("Async", new AsyncLayout());
window.AScript.set("asyncLayout", true);