class entryModal extends serverFetch {
    constructor(image) {
        super();
        this.image = image;
        console.log(this.image);
        
        this.modal = document.querySelector('#modal');
        this.openModal();
    }

    async openModal() {
        let url;
        if(backend.status == "deleted"){
        url = '/backend/modal/' + this.image.id + '/deleted';
        }
        else{
        url = '/backend/modal/' + this.image.id;
        }

        let modalContentElement = document.querySelector('.modal-content');
        let modal = new bootstrap.Modal(document.getElementById('modal'));

        await this.makeFetch(url, modalContentElement);
        modal.show()

        let modalBackdrop = document.querySelectorAll(".modal-backdrop");
        if(modalBackdrop && modalBackdrop.length > 1){
            modalBackdrop[0].remove(); 
        }

        this.iniModal();
        console.log("nach dem fetch");
        //loading conversations
        updateConvModal(this.image.id)
    }

    iniModal() {
        this.iniTags();
        this.iniButtons();
    }

    //-----------//

    iniTags() {
        this.newTagInput = document.querySelector('#newTag');

        this.newTagInput.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
                event.preventDefault();

                this.addTag();
            }

        });

        this.tags = document.querySelectorAll('[name="tag[]"]');
        this.tags.forEach(function (element) {
            element.addEventListener("change", function (e) {
                element.type = "hidden";
                element.setAttribute("name", "del_tags[]");

                let inputId = element.id;
                let label = document.querySelector('label[for="' + inputId + '"]');
                label.style.display = "none";
            });
        });
    }

    addTag() {
        this.newTagInput = document.querySelector('#newTag');
        if (this.newTagInput.value !== "") {
            let tag = this.newTagInput.value;

            let container = document.querySelector('#tagsContainer');

            let tagInput = `<input type='checkbox' name='tag[]' class='form-check-input sr-only d-none' id='${tag}' value='${tag}' checked>`
                + `<label for='${tag}' class='badge text-bg-secondary text-lg fs-7 mt-2 mx-1 custom_tag_label'>${tag} x</label>`


            container.insertAdjacentHTML('beforeend', tagInput);


            this.newTagInput.value = '';
        }
    }

    iniButtons(){
        this.saveButton = this.modal.querySelector('#saveButton');
        this.saveandnextButton = this.modal.querySelector("#saveAndNext");
        this.deleteButton = this.modal.querySelector('#deleteButton');
        console.log(this.deleteButton);

        this.saveButton.addEventListener("click", () =>{
            this.save();
        });

        this.saveandnextButton.addEventListener("click", () =>{
            this.save(true);
        })

        this.deleteButton.addEventListener("click", ()=>{
            this.delete();
        })
    }

     async save(next=false) {
        this.form = document.querySelector("#modalForm");
        let formData = new FormData(this.form);

        let url = '/backend/insert/';

        await this.makeformFetch(url,formData);
        
            if(next){
               let nextmodal =  this.image.getNext();
             await new entryModal(nextmodal);
            }
            else{
                $('#modal').modal('hide');
                backend.getEntries(backend.status);
            }
        
    }

     async delete(){
        this.image.delete();
        $('#modal').modal('hide');
        backend.getEntries(backend.status);
     }

}