'use strict';

oml.ui.annotationPanel = function(options, self) {
    self = self || {};
    var ui = oml.user.ui;

    var ui = oml.user.ui;

    var $bar = Ox.Bar({size: 16});

    var $addQuote = Ox.Button({
        disabled: true,
        style: 'symbol',
        title: 'add',
        tooltip: Ox._('Add Quote'),
        type: 'image'
    }).bindEvent({
        click: function() {
            oml.$ui.viewer.postMessage('addAnnotation', {})
        }
    }).appendTo($bar);

    var $deleteQuote = Ox.Button({
        disabled: true,
        style: 'symbol',
        title: 'remove',
        tooltip: Ox._('Delete Quote'),
        type: 'image'
    }).bindEvent({
        click: function() {
            var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
            $annotation.length && $annotation.delete()
            that.updateSelection()
        }
    }).appendTo($bar);

    var $menuButton = Ox.MenuButton({
        items: [
            {id: 'addAnnotation', title: 'Add Annotation', disabled: true, keyboard: 'return'},
            {id: 'removeAnnotation', title: 'Remove Annotation', disabled: true, keyboard: 'delete'},
            {id: 'removeAnnotations', title: 'Remove All Annotation', disabled: true},
            {},
            {id: 'show', title: Ox._('Show Annotations'), disabled: true},
            {group: 'showAnnotationUsers', min: 1, max: 1, items: [
                {id: 'all', title: Ox._('All Annotations'), checked: ui.showAnnotationUsers == 'all'},
                {id: 'me', title: Ox._('My Annotations'), checked: ui.showAnnotationUsers == 'me'},
            ]},
            {},
            {id: 'sort', title: Ox._('Sort Annotations'), disabled: true},
            {group: 'sortAnnotations', min: 1, max: 1, items: [
                {id: 'position', title: Ox._('By Position'), checked: ui.sortAnnotations == 'position'},
                {id: 'quote', title: Ox._('By Quote Text'), checked: ui.sortAnnotations == 'quote'},
                {id: 'note', title: Ox._('By Note Text'), checked: ui.sortAnnotations == 'note'},
                {id: 'date', title: Ox._('By Date Added'), checked: ui.sortAnnotations == 'date'}
            ]},
            {},
            {id: 'exportAnnotations', title: Ox._('Export Annotations')},
        ],
        style: 'square',
        title: 'set',
        type: 'image',
        width: 16
    }).css({
        // borderColor: 'transparent',
        float: 'right'
    }).bindEvent({
        click: function(data) {
            var id = data.id;
            if (id == 'exportAnnotations') {
                oml.api.get({
                    id: oml.user.ui.item,
                    keys: []
                }, function(result) {
                    oml.ui.exportAnnotationsDialog(result.data).open()
                })
            } else if (id =='addAnnotation') {
                oml.$ui.viewer.postMessage('addAnnotation', {})
            } else if (id =='removeAnnotation') {
                var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
                $annotation.length && $annotation.delete()
                that.updateSelection()
            } else if (id =='removeAnnotations') {
                oml.ui.removeAnnotationsDialog().open()
            } else {
                console.log('click', id, data)
            }
        },
        change: function(data) {
            var id = data.id;
            if (data.id == 'showAnnotationUsers') {
                var value = data.checked[0].id;
                oml.UI.set('showAnnotationUsers', value);
                oml.$ui.viewer.renderAnnotations();
            } else if (data.id == 'sortAnnotations') {
                var value = data.checked[0].id;
                oml.UI.set('sortAnnotations', value);
            } else if (id == 'show') {
                console.log('show', data)
                oml.UI.set({annotationsShow: data.checked[0].id});
            } else if (id == 'sort') {
                console.log('sort', data)
                oml.UI.set({annotationsSort: data.checked[0].id});
            } else {
                console.log('change', id, data)
            }
        }
    }).appendTo($bar);

    var ui = oml.user.ui;
    var that = Ox.SplitPanel({
        elements: [
            {
                element: $bar,
                size: 16
            },
            {
                element: oml.$ui.annotationFolder = oml.ui.annotationFolder()
            }
        ],
        orientation: 'vertical'
    }, self).update({
        hasAnnotations: function() {
            $menuButton[self.options.hasAnnotations ? 'enableItem' : 'disableItem']('removeAnnotations')
        }
    });

    that.updateSelection = function(selection) {
        var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
        $addQuote.options({disabled: !selection})
        $deleteQuote.options({disabled: !$annotation.length})
        $menuButton[selection ? 'enableItem' : 'disableItem']('addAnnotation')
        $menuButton[$annotation.length ? 'enableItem' : 'disableItem']('removeAnnotation')
    }

    return that;

};