// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/*
 * @package    atto_emoticon
 * @copyright  2014 Frédéric Massart
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/**
 * @module moodle-atto_emoticon-button
 */

var COMPONENTNAME = 'atto_emoticon',
    CSS = {
        EMOTE: 'atto_emoticon_emote',
        MAP: 'atto_emoticon_map'
    },
    SELECTORS = {
        EMOTE: '.atto_emoticon_emote'
    },
    TEMPLATE = '' +
            '<div class="{{CSS.MAP}}">' +
                '<ul>' +
                    '{{#each emoticons}}' +
                        '<li><div>' +
                            '<a href="#" class="{{../CSS.EMOTE}}" data-text="{{text}}">' +
                                '<img ' +
                                    'src="{{image_url imagename imagecomponent}}" ' +
                                    'alt="{{get_string altidentifier altcomponent}}"' +
                                '/>' +
                            '</a>' +
                        '</div>' +
                        '<div>{{text}}</div>' +
                        '<div>{{get_string altidentifier altcomponent}}</div>' +
                        '</li>' +
                    '{{/each}}' +
                '</ul>' +
            '</div>';

/**
 * Atto text editor emoticon plugin.
 *
 * @namespace M.atto_emoticon
 * @class button
 * @extends M.editor_atto.EditorPlugin
 */

Y.namespace('M.atto_emoticon').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {

    /**
     * A reference to the current selection at the time that the dialogue
     * was opened.
     *
     * @property _currentSelection
     * @type Range
     * @private
     */
    _currentSelection: null,

    initializer: function() {
        this.addButton({
            icon: 'e/emoticons',
            callback: this._displayDialogue
        });
    },

    /**
     * Display the Emoticon chooser.
     *
     * @method _displayDialogue
     * @private
     */
    _displayDialogue: function() {
        // Store the current selection.
        this._currentSelection = this.get('host').getSelection();
        if (this._currentSelection === false) {
            return;
        }

        var dialogue = this.getDialogue({
            headerContent: M.util.get_string('insertemoticon', COMPONENTNAME),
            focusAfterHide: true
        }, true);

        // Set the dialogue content, and then show the dialogue.
        dialogue.set('bodyContent', this._getDialogueContent())
                .show();
    },

    /**
     * Insert the emoticon.
     *
     * @method _insertEmote
     * @param {EventFacade} e
     * @private
     */
    _insertEmote: function(e) {
        var target = e.target.ancestor(SELECTORS.EMOTE, true),
            host = this.get('host');

        e.preventDefault();

        // Hide the dialogue.
        this.getDialogue({
            focusAfterHide: null
        }).hide();

        // Build the Emoticon text.
        var html = ' ' + target.getData('text') + ' ';

        // Focus on the previous selection.
        host.setSelection(this._currentSelection);

        // And add the character.
        host.insertContentAtFocusPoint(html);

        this.markUpdated();
    },

    /**
     * Generates the content of the dialogue, attaching event listeners to
     * the content.
     *
     * @method _getDialogueContent
     * @return {Node} Node containing the dialogue content
     * @private
     */
    _getDialogueContent: function() {
        var template = Y.Handlebars.compile(TEMPLATE),
            content = Y.Node.create(template({
                emoticons: this.get('emoticons'),
                CSS: CSS
            }));
        content.delegate('click', this._insertEmote, SELECTORS.EMOTE, this);
        content.delegate('key', this._insertEmote, '32', SELECTORS.EMOTE, this);

        return content;
    }
}, {
    ATTRS: {
        /**
         * The list of emoticons to display.
         *
         * @attribute emoticons
         * @type array
         * @default {}
         */
        emoticons: {
            value: {}
        }
    }
});