class Loading{
    constructor(settings){
        this.configure = settings;
        this.rootNode = null;
        this.init();
    }

    init(){
        let body = document.querySelector(".searchBody");
        this.rootNode = document.getElementById("loading");
        if(this.rootNode == null){
            body.insertAdjacentHTML('beforeend' , '<div id="loading"></div>');
            this.rootNode = document.getElementById("loading");
        }else{
            this.rootNode.remove();
        }
        
        
    }

    show(){
        let loadingCheck = document.getElementById('loading-animation');
        if(loadingCheck == null){
            this.maskShow();
        }else{
            this.rootNode.style.display = "flex";
        }
    }

    maskShow(){
        this.rootNode.classList.add('loading');
        this.rootNode.style.display = "flex";
        if(this.configure.isLoading){
            this.rootNode.insertAdjacentHTML( 'beforeend' , "<div id='loading-animation'></div>" );
            let maksAnimation = document.getElementById('loading-animation');
            maksAnimation.insertAdjacentHTML('beforeend' , '<span></span><span></span><span></span><span></span><span></span>');
        }else{
            let maksAnimation = document.getElementById('loading-animation');
            if(maksAnimation != null){
                maksAnimation.remove();
            }
            this.rootNode.insertAdjacentHTML('beforeend' , "<p id='loading-info'>" + this.configure.text + "</p>");
        }
    }

    showText()
    {
        this.maskShow();
        let that = this;
        setTimeout(function(){
            that.rootNode.style.display = "none";
            let maksAnimation = document.getElementById('loading-info');
            maksAnimation.remove();
        },1500);
    }


    disappear(){
        this.rootNode.style.display = "none";
    }
}