class Backend extends serverFetch {
    constructor() {
        super()
        this.images = [];
        this.container = document.querySelector("#entries_container");
        this.buttonIni = false;
        this.status;
        this.toolbar = new toolBar;
        this.checkedImages;
        this.asideCounter = document.querySelector("#asideCounter");

        this.getEntries('new');
    }

    async getEntries(status, event = null) {
        this.status = status;
        if (!this.buttonIni) {
            document.querySelector('.nav-link').classList.add('active'); //turns first button ("new") to active
            this.buttonIni = true;
        }
        if (!serverFetch.fetched) {
            if (event) { // this will be used when clicked on side-nav
                let allButtons = document.querySelectorAll('.nav-link');
                allButtons.forEach(button => {
                    button.classList.remove('active');
                    if (button.classList.contains("bg-danger")) {
                        button.classList.remove("bg-danger");
                        button.classList.add("text-danger");
                    }
                });
                event.target.classList.add('active');
                if (backend.status == "deleted") {
                    event.target.classList.add('bg-danger');
                    event.target.classList.remove('text-danger');
                }
            }
            this.loadSpinner();

            let url = "/backend/entries/" + status;
            await this.makeFetch(url, this.container);
            this.loadCounter();
            this.removeSpinner();

            this.loadImages();

        }


    }

    //gets cleaned up soon! 
    async getConversations(status, event = null) {
        this.status = status;
        if (!this.buttonIni) {
            document.querySelector('.nav-link').classList.add('active');
            this.buttonIni = true;
        }
        if (!serverFetch.fetched) {
            if (event) {
                let allButtons = document.querySelectorAll('.nav-link');
                allButtons.forEach(button => {
                    button.classList.remove('active');
                    if (button.classList.contains("bg-danger")) {
                        button.classList.remove("bg-danger");
                        button.classList.add("text-danger");
                    }
                });
                event.target.classList.add('active');
                if (backend.status == "deleted") {
                    event.target.classList.add('bg-danger');
                    event.target.classList.remove('text-danger');
                }
            }
        }
        this.loadSpinner();
        let url = "/backend/conversations/status/" + status;
        await this.makeFetch(url, this.container);
        this.removeSpinner();
    }

    loadCounter() {
        let counterContent = document.querySelector("#counter"); //comes with ajax (html with display:none)
        this.asideCounter.innerHTML = counterContent.innerHTML;
    }

    async loadImages() {

        let entrys = document.querySelectorAll('.custom-thumbnail');
        let entryMap = [];

        entrys.forEach((element) => {
            let id = element.getAttribute('thumbid');
            let image = new imageEntry(id);
            entryMap.push(image);
        });


        this.images = entryMap;
    }

    loadSpinner() {
        let spinner = document.querySelector("#spinner");

        this.container.classList.add("align-items-center");
        this.container.innerHTML = spinner.innerHTML;
        this.asideCounter.innerHTML = spinner.innerHTML;
    }

    removeSpinner() {
        this.container.classList.remove("align-items-center");
    }


    multitool() {
        this.checkedImages = this.images.filter(image => image.thumbnailcheckbox && image.thumbnailcheckbox.checked);
        this.toolbar.countdisplay.innerHTML = this.checkedImages.length
        if (this.checkedImages.length > 0) {
            this.toolbar.show();
        }
        else {
            this.toolbar.hide()
        }
    }

    openSingleImage(id, permalink = false) {
        //this method can be used to open a modal without imageentrys 
        this.pseudImage = { id: id };

        new entryModal(this.pseudImage);
        if(permalink){
            this.getEntries()
        }
    }


}