$('#contentField').on('keyup', function (e) {
    var range = window.getSelection().getRangeAt(0);
    var end_node = range.endContainer;
    var end = range.endOffset;

    if (end_node !== this) {
        const text_nodes = get_text_nodes_in(this);
        for (let i = 0; i < text_nodes.length; ++i) {
            if (text_nodes[i] === end_node) {
                break;
            }
            end += text_nodes[i].length;
        }
    }

    let html = $(this).html();
    if (/\&nbsp;$/.test(html) && $(this).text().length === end) {
        end--;
        set_range(end, end, this);
        return;
    }

    let filter = html.replace(/<span class="mention">/g, "")
        .replace(/<span class="hashtag">/g, "")
        .replace(/<\/span>/g, "")
        .replace(/@[A-Za-z0-9._]+/g, function (match) {
            return `<span class="mention">${match}</span>`;
        })
        .replace(/#[A-Za-z0-9._]+/g, function (match) {
            return `<span class="hashtag">${match}</span>`;
        });

    if (!/&nbsp;$/.test($(this).html())) {
        filter += '&nbsp;';
    }
    $(this).html(filter);
    set_range(end, end, this);
});

$('#contentField').on('mouseup', function (e) {
    if (!/\&nbsp;$/.test($(this).html())) {
        return;
    }
    var range = window.getSelection().getRangeAt(0);
    var end = range.endOffset;
    var end_node = range.endContainer;
    if (end_node != this) {
        var text_nodes = get_text_nodes_in(this);
        for (var i = 0; i < text_nodes.length; ++i) {
            if (text_nodes[i] == end_node) {
                break;
            }
            end += text_nodes[i].length;
        }
    }
    if ($(this).text().length == end) {
        end = end - 1;
        set_range(end, end, this);
    }
});

function get_text_nodes_in(node) {
    var text_nodes = [];
    if (node.nodeType === 3) {
        text_nodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            var text_node;
            text_nodes.push.apply(text_nodes, get_text_nodes_in(children[i]));
        }
    }
    return text_nodes;
}

function set_range(start, end, element) {
    var range = document.createRange();
    range.selectNodeContents(element);
    var text_nodes = get_text_nodes_in(element);
    var foundStart = false;
    var char_count = 0, end_char_count;

    for (var i = 0, text_node; text_node = text_nodes[i++];) {
        end_char_count = char_count + text_node.length;
        if (!foundStart && start >= char_count && (start < end_char_count || (start === end_char_count && i < text_nodes.length))) {
            range.setStart(text_node, start - char_count);
            foundStart = true;
        }
        if (foundStart && end <= end_char_count) {
            range.setEnd(text_node, end - char_count);
            break;
        }
        char_count = end_char_count;
    }

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

$.fn.selectRange = function (start, end) {
    var e = document.getElementById($(this).attr('id'));
    if (!e) {
    } else if (e.setSelectionRange) {
        e.focus();
        e.setSelectionRange(start, end);
    } /* WebKit */
    else if (e.createTextRange) {
        var range = e.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    } /* IE */
    else if (e.selectionStart) {
        e.selectionStart = start;
        e.selectionEnd = end;
    }
};

let postMedia = [];

function publishPost() {
    let isFilled = true;
    let content = $('#contentField').text();
    if (postMedia.length === 0 && content === "") {
        $('#postModal #content').addClass('has-error');
        isFilled = false;
    } else {
        $('#postModal #content').addClass('has-success');
    }

    if (isFilled) {
        const replyTo = $('#postModal #replyTo').val();
        submitPost(content, replyTo);
    } else {
        addSnackbar('primary', 'Wir haben leider noch nicht erlernt, wie man leere Posts veröffentlicht.');
    }
}

let uploadingFiles = [];

(function () {
    // file drag hover
    function fileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }

    // file selection
    function fileSelectHandler(e) {

        // cancel event and hover styling
        fileDragHover(e);

        // fetch FileList object
        const files = e.target.files || e.dataTransfer.files;

        // process all File objects
        let i = 0;
        for (let f of files) {
            const generalType = f.type.split('/')[0];

            if (postMedia.length + i > 4 || postMedia.find(media => media.type !== 'image' || media.type !== generalType)) {
                addSnackbar('warning', 'Du kannst maximal vier Bilder zu einem Post hinzufügen.');
                continue;
            }

            parseFile(f);
            uploadFile(f);
            i++;
        }
    }

    // output file information
    function parseFile(file) {
        $('#postModalPublish').addClass('disabled').attr('disabled', true);
        uploadingFiles.push(file);

        const thumbnailEl = $('<div class="post-image"></div>');
        $('.post-images').append(thumbnailEl);
        switch (file.type.split('/')[0]) {
            case 'image':
                const reader = new FileReader();
                reader.addEventListener('load', () => {
                    thumbnailEl.css('background-image', `url(${reader.result})`);
                });
                break;

                if (postMedia.length >= 4)
                    $('.postImageUpload').hide();
            case 'video':
                const video = document.createElement('video');
                video.src = URL.createObjectURL(file);

                video.addEventListener('loadeddata', () => {
                    const width = video.videoWidth;
                    const height = video.videoHeight;

                    const canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext('2d').drawImage(video, 0, 0, width, height);

                    thumbnailEl.css('background-image', `url(${canvas.toDataURL()})`);
                });

                $('.postImageUpload').hide();
                break;
            case 'audio':
                break;
        }
    }

    // upload JPEG files
    function uploadFile(file) {
        var xhr = new XMLHttpRequest();
        const allowedTypes = ['image/jpg', 'image/jpeg', 'image/gif', 'image/png', 'video/mp4'];
        if (xhr.upload && allowedTypes.includes(file.type) && file.size <= 100000000) {
            const formData = new FormData();
            formData.append('postMedia', file);

            $.ajax({
                url: '/user/uploadPostMedia',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: (data) => {
                    postMedia.push({
                        type: data.type,
                        path: data.path,
                    });

                    uploadingFiles.splice(uploadingFiles.indexOf(file), 1);
                    if(uploadingFiles.length === 0) {
                        $('#postModalPublish').removeClass('disabled').attr('disabled', false);
                    }
                },
            });

        }

    }

    // initialize
    function init() {

        var fileselect = $('#postFiles')[0],
            filedrag = $('#postFiles')[0];
        // submitbutton = $id("submitbutton");

        if (!fileselect)
            return;

        // file select
        fileselect.addEventListener("change", fileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", fileDragHover, false);
            filedrag.addEventListener("dragleave", fileDragHover, false);
            filedrag.addEventListener("drop", fileSelectHandler, false);
            filedrag.style.display = "block";
        }

    }

    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
        init();
    }


})();

$('#postModal')
    .on('hide.bs.modal', function (e) {
        if (!this.forceQuit && (postMedia.length > 0 || $('#contentField').text().trim().length > 0)) {
            e.preventDefault();

            let allowClosing = false;
            const confirmModal = $(`
                <div class="modal fade" role="dialog">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Post verwerfen?</h4>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-sm btn-outline btn-red dismiss" type="button" data-dismiss="modal">Ja, Post verwerfen</button>
                                <button class="btn btn-sm btn-primary continue" type="submit" data-dismiss="modal">Nein, Post behalten</button>
                            </div>
                        </div>
                    </div>
                </div> 
            `);
            confirmModal.modal('show');

            $('.dismiss', confirmModal).click(() => {
                allowClosing = true;

                this.forceQuit = true;
                $(this).modal('hide');
            });

            $('.continue', confirmModal).click(() => {
                allowClosing = true;
            });

            confirmModal
                .on('hide.bs.modal', function (e) {
                    if (!allowClosing)
                        e.preventDefault();
                })
                .on('hidden.bs.modal', function () {
                    $(this).remove();
                });
        } else {
            this.forceQuit = false;
        }
    })
    .on('hidden.bs.modal', () => {
        $('#postModal #replyTo').val(-1);

        if(postMedia.length > 0) {
            postMedia.forEach(media => {
                $.ajax({
                    url: '/user/deletePostMedia',
                    method: 'POST',
                    data: {
                        path: media.path
                    }
                });
            });
        }
        resetPostForm();
        $('#postModalBody > *:not(#postForm)').remove();
        $('#postForm').show();
        $('#postModal .modal-footer').show();
    });

function resetPostForm() {
    uploadingFiles = [];
    postMedia = [];
    $('.post-images').empty();
    $('.postImageUpload').show();
    $('#contentField').text('');
}

function submitPost(content, replyTo) {
    if (postMedia.length > 4) {
        return;
    }

    const body = $('#postModalBody');
    $.ajax({
        url: "/user/publishPost",
        method: 'POST',
        data: {
            content,
            replyTo,
            postMedia
        },
        beforeSend: function () {
            body.children().hide().parent().append('<div class="loadingSpinner"></div>');
            $('#postModal .modal-footer').hide();
            resetPostForm();
        },
        success: function (data) {
            $('.loadingSpinner', body).remove();
            body.append(data);
        },
        error: function (data) {
        }
    });
}