'use strict';

oml.ui.annotation = function(annotation, $iframe) {
    var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
        padding: '8px'
    }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
        click: function(event) {
            that.select()
            $iframe.postMessage('selectAnnotation', {
                id: annotation.id
            })
        }
    })
    var notes = annotation.notes.length ? annotation.notes.map(function(note) {
        note.editable = note.user == ''
        return note
    }) : [{
            id: 'A',
            placeholder: 'Add Note',
            value: '',
            editable: true
        }];
    console.log(annotation.notes)
    var $note = Ox.ArrayEditable({
        editing: true,
        items: notes,
        type: 'textarea'
    }).css({
        margin: '2px',
        minHeight: '12px'
    }).bindEvent({
        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({
                    created: data.created || (new Date).toISOString(),
                    modified: (new Date).toISOString(),
                    id: data.id,
                    user: '',
                    value: data.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() {
            that.triggerEvent('delete', {
                id: annotation.id
            })
        }
    }).append($quote).append($note);

    that.annotate = function() {
        var item = {
            id: 'note', value: '', editable: true
        }
    }
    that.deselect = function() {
        that.removeClass('selected')
        that.loseFocus()
    }
    that.select = function () {
        let selected = document.querySelector('.OMLAnnotation.selected')
        selected && selected.classList.remove('selected')
        that.addClass('selected')
        that.gainFocus()
    }
    return that;
};