$(document).ready(function () {
    HtmlInputInitializer.initAll();
});

class HtmlInputInitializer {
    static htmlInputSelector = ".html-input";

    public static initAll() {
        $(this.htmlInputSelector).each(function (i, item) {
            HtmlInputInitializer.init(item);
        });
    }

    public static init(htmlInput: HTMLElement) {
        ($(htmlInput) as any).summernote({
            fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
            fontNames: ['PT Sans', 'PT Sans Pro', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
                'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
                'Tahoma', 'Times New Roman', 'Verdana'],
            fontNamesIgnoreCheck: ['PT Sans', 'PT Sans Pro'],
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['backcolor', ['backcolor']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['ol', ['ol']],
                ['ul', ['ul']],
                ['hr', ['hr']],
                ['link', ['link']],
                ['picture', ['picture']],
                ['video', ['video']],
                ['undo', ['undo']],
                ['redo', ['redo']],
                ['fullscreen', ['fullscreen']],
                ['codeview', ['codeview']],
                ['fontsize', ['fontsize', 'fontname']],
            ],
            callbacks: {
                onImageUpload: function (files) {
                    uploadImage(htmlInput, files, insertImagesCallback);
                },
                onChange: function (contents, $editable) {
                    changeCallback(htmlInput, contents, $editable);
                }
            }
        });

        function uploadImage(htmlInput, files, successCallback) {
            var url = $(htmlInput).attr("data-image-upload-url");
            var form = $(htmlInput).closest("form").get(0);

            var fileData = new FormData(form);

            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }

            $.ajax({
                type: "POST",
                url: url,
                contentType: false,
                processData: false,
                data: fileData,
                success: function (response) {
                    if (successCallback) {
                        successCallback(htmlInput, response);
                    }
                },
                error: function (error) {
                }
            });
        }

        function insertImagesCallback(htmlInput, imgArray) {
            console.log("callback data: ", imgArray);

            for (var i = 0; i < imgArray.length; i++) {
                var img = document.createElement("img");
                var elm = imgArray[i];
                img.src = elm.url;
                ($(htmlInput) as any).summernote("pasteHTML", img);
            }
        }

        function changeCallback(htmlInput, contents, $editable) {
            $(htmlInput).trigger("html-input-change", [htmlInput, contents, $editable]);
        }
    }
}