class ImageController {
    constructor(key, images, maxImages) {
        //console.log('Image controller got images: ');
        //console.log(images);

        //console.log('ImageController: key: '+key);
        //console.log('ImageController: maxImages: '+maxImages);
        //
        this.key = key;
        this.currentImageListId = "#image-list-"+key;
        this.fileCounter = 0;
        this.maxImages = maxImages;
        this.images = images;
        //
        this.initialize();
        this.checkNewButtonState();
    }

    initialize()
    {
        let self = this;

        // Click on an existing image to remove it
        $(self.currentImageListId + ' .image-thumb-li').click(function(){
            $(this).remove();
            self.removeFromImages($('img',this).attr('data-image-id'));
        });

        // When a file is selected for uploading
        $(document).on('click', self.currentImageListId + ' .new-image input', function(e) {
            //console.log(self.countActiveImages());
            if(self.maxImages != '' && self.countActiveImages() >= self.maxImages){
                e.preventDefault();
                return;
            }
        });

        $(document).on('change', self.currentImageListId + ' .new-image input', function(){
            //console.log("images.blade.php: Change event triggered");

            if(self.maxImages != '' && self.countActiveImages() >= self.maxImages) return;

            //console.log('Checking old input element: #'+self.key+'-'+self.fileCounter);
            let $oldInput = $('#'+self.key+'-'+self.fileCounter);
            //console.log("old input: ");
            //console.log($oldInput);
            //console.log("current image list element: "+self.currentImageListId + ' .uploads :');
            //console.log($(self.currentImageListId + ' .uploads'));

            $(self.currentImageListId + ' .uploads').append($oldInput);
            self.images.push({
                id: null,
                name: $oldInput.attr('id'),
                delete: false
            });
            self.updateImages();
            $oldInput.unbind('change');
            //console.log("unbinded change event from the old input element");

            let files = $oldInput.prop('files');
            //console.log("files from property from the old input: ");
            //console.log(files);

            // Removing multiple files doesn't work yet, so it is disabled
            for(let i = 0; i < files.length ; i++){
                self.insertImage(files[i], self.fileCounter, i);
            }

            self.fileCounter++;
            $(self.currentImageListId + ' .new-image').append(
                '<input type="file" id="'+self.key+'-' + self.fileCounter + '" name="'+self.key +'-' + self.fileCounter + '" accept="image/*" />'
            );
        });

        this.checkNewButtonState();
    }


    insertImage(file, fileCounter, imageCounter){
        let self = this;
        //console.log('insertImage');

        let reader = new FileReader();
        reader.onload = function(e){
            let dataURL = e.target.result;
            $(self.currentImageListId + ' .thumbs').append('' +
                '<li id="image-thumb-'+this.key+'-' + fileCounter + '-' + imageCounter + '">' +
                '<img src="' + dataURL + '" />' +
                '<div class="deleteImage">⨯</div>' +
                '</li>');
            let thumb = $('#image-thumb-'+self.key+'-' + fileCounter + '-' + imageCounter);
            // Remove image for uploading when clicked
            thumb.click(function(){
                self.removeFromImages(''+self.key+'-' + fileCounter);
                thumb.remove();
                let element = $('#'+self.key+'-' + fileCounter);

                element.val('');
                element.remove();
            });
        };
        this.checkNewButtonState();
        reader.readAsDataURL(file);
    }

    checkNewButtonState()
    {
        let button = $(self.currentImageListId + ' .new-image');
        if(this.maxImages !== undefined && this.countActiveImages() >= this.maxImages){
            //hide the button
            button.hide();
            // //console.log("hide add new image button");
        } else {
            //show the button
            button.show();
            // //console.log("show add new image button");
        }
    }

    updateImages(){
        var images = JSON.stringify(this.images, null, 2);
        //console.log('Update images: '+images);

        $('#'+this.key).val(images);
        //console.log("Updated images: id:"+'#'+this.key+" with json data:"+JSON.stringify(this.images, null, 2));
        //console.log($('#'+this.key));
        this.checkNewButtonState();
    }

    countActiveImages(){
        //console.log("countActiveImages: ");
        //console.log(this.images);
        let count = 0;
        for(let i=0; i<this.images.length; i++) {
            if(!this.images[i].delete) count++;
        }
        //console.log("countActiveImages thats: "+count+" length: "+this.images.length);
        return count;
    }

    removeFromImages(idOrFileInputName){
        //console.log('Removing image: '+idOrFileInputName);
        //console.log('this.images: ');
        //console.log(this.images);
        for(let i=0; i<this.images.length; i++) {
            if (this.images[i].name == idOrFileInputName) {
                this.images.splice(i, 1);
                this.updateImages();
                return;
            }
            if (this.images[i].id == idOrFileInputName) {
                this.images[i].delete = true;
                this.updateImages();
                return;
            }
        }
    }
}