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);
/**/
/*<img src="/images/logo/logo.jpg" />*/
//
class AsyncLayout extends ALayout {
    constructor() {
        super();
        this.isLoaded = false;
        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/slogo.png" style="height:65px" />
                        <a href="javascript:void(0)" class="hd-close">
                            <i class="atg atg-x"></i>
                        </a>
                    </a>
                    <div class="navmain d-f f-c scroll-header" data-scrollbar>
                    </div>
                  
                 </div>`;
        this.fHeader = `<div id="fHeader" class="f-header">
                    <div class="con">
                        <div class="r d-f a-i-center c_second_header">
                            <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
                                <img src="/images/logo/slogo.png" style="height:32px" />
                            </a>
                            <div class="ml-auto navmain d-x-f d-n">
                                
                            </div>
                            
                            <div class="ml-auto d-f d-x-n a-i-center">
                                <a class="d-f nav-login mr-0"><i class="atg atg-search a-2x"></i></a>
                                <a app-nav href="${window.GetAbsoluteURL("/Login")}" class="d-f nav-login"><i class="atg atg-user a-2x"></i></a>
                                <div class="m-navbar">
                                    <div class="d-f f-c ico-menu p-0">
                                        <div><span style="width:100%"></span></div>
                                        <div><span style="width:100%"></span></div>
                                        <div><span style="width:100%"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;
    }
    _createFHeader() {
        document.body.insertAdjacentHTML("afterbegin", this.layMNav);
        document.body.insertAdjacentHTML("afterbegin", this.fHeader);
        var h = document.querySelector("#fHeader .navmain");
        var h2 = document.querySelector(".m-header");
        var he2 = h2.querySelector(".navmain");
        var r = document.querySelector("#header");
        r.querySelector(".navmain").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"));
        
       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 .navmain", ".m-header", document.querySelectorAll(".m-navbar > .ico-menu"), true);
        this.listAObject.add(a1);
        var a2 = new AMenu("#fHeader .navmain", null, null);
        this.listAObject.add(a2);
        
        
        var sOption = {
            damping: (window.getOS() == "Android") ? .06 : .04,
            thumbMinSize: 25,
            renderByPixel: true,
            alwaysShowTracks: true,
            continuousScrolling: true
        };
        
        this.scroll = window.Scrollbar.init(document.querySelector('.m-header .scroll-header[data-scrollbar]'), sOption);
       
        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"));
        }
    }
}

window.ALayout.set("Async", new AsyncLayout());
window.AScript.set("asyncLayout", true);