'use strict';

oml.SELECTION = 0
oml.HIGHLIGHT = 1

oml.ui.annotation = function(annotation, $iframe) {
    var value = Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')
    if (annotation.type == oml.HIGHLIGHT) {
        let coord = annotation.coords[0].map(p => parseInt(p)).join(',')
        let image = `/${oml.user.ui.item}/2048p${parseInt(annotation.page)},${coord}.jpg`
        value = `<img src="${image}">`
    }
    var $quoteText = Ox.Element()
        .addClass('OxSelectable OMLQuote')
        .html(value)
        .on({
            click: function(event) {
                var id
                if (event.ctrlKey) {
                    that.deselect()
                    id = null
                } else {
                    that.select()
                    id = annotation.id
                }
                $iframe.postMessage('selectAnnotation', {
                    id: id
                })
            }
        });
    var $quoteBackground = Ox.Element().addClass('OMLQuoteBackground');
    var $quote = Ox.Element()
        .addClass('OMLQuoteBox')
        .append(
            $quoteBackground
        ).append(
            $quoteText
        );
    var notes = annotation.notes.length ? annotation.notes.map(function(note) {
        note.editable = !note.user
        return note
    }) : [];
    var $notes = Ox.ArrayEditable({
        editing: true,
        items: notes,
        placeholder: 'Add note',
        type: 'textarea'
    }).css({
        minHeight: '12px'
    }).bindEvent({
        doubleclick: addNote,
        submit: function(data) {
            var note = Ox.getObjectById(annotation.notes, data.id)
            if (note) {
                note.value = data.value
                note.modified = (new Date).toISOString()
            } else {
                annotation.notes.push(note = {
                    created: data.created || (new Date).toISOString(),
                    modified: (new Date).toISOString(),
                    id: data.id,
                    value: data.value
                })
            }
            oml.api.editNote({
                item: oml.user.ui.item,
                annotation: annotation.id,
                notes: {
                    created: note.created,
                    modified: note.modified,
                    value: note.value
                }
            })
            that.triggerEvent('change')
        }
    });
    var that = Ox.Element().attr({
        id: 'a-' + annotation.id
    }).addClass(
        'OxSelectable OMLAnnotation'
    ).css({
        borderBottom: '1px solid rgb(208, 208, 208)',
    }).bindEvent({
        key_delete: function() {
            if (annotation.user == oml.user.id) {
                that.triggerEvent('delete', {
                    id: annotation.id
                })
            }
        }
    }).append($quote).append($notes);

    function addNote() {
        if (!$notes.options('items').length) {
            that.select()
            $notes.addItem(0, {
                id: 'A',
                value: '',
                editable: true
            }).options({
                selected: 'A'
            }).editItem()
        }
    }

    that.annotate = function() {
        if (oml.user.ui.showAnnotations) {
            addNote()
        }
    }
    that.delete = function() {
        if (annotation.user == oml.user.id) {
            that.triggerEvent('delete', {
                id: annotation.id
            })
        }
    }
    that.deselect = function() {
        that.removeClass('selected')
        that.loseFocus()
    }
    that.select = function () {
        $iframe.postMessage('selectAnnotation', {
            id: annotation.id
        })
        let selected = document.querySelector('.OMLAnnotation.selected')
        selected && selected.classList.remove('selected')
        that.addClass('selected')
        that.gainFocus()
        oml.$ui.annotationPanel.updateSelection(false)
        that[0].scrollIntoViewIfNeeded && that[0].scrollIntoViewIfNeeded()
    }
    return that;
};