/**
 * Private class used by {@link Ext.froala.Editor} andd {@link Ext.froala.EditorField}.
 * If you use this mixin, your class must override component methods handed here:
 * - doAddListener -> handleAddListener
 * - doRemoveListener -> handleRemoveListener
 * - updateValue
 * See source for Ext.froala.Editor or EditorField for examples.
 */
Ext.define('Ext.froala.Mixin', {
    extend: 'Ext.Mixin',
 
    twoWayBindable: ['value'],
    defaultBindProperty: 'value',
 
    config: {
        /**
         * @cfg {String} activationKey The Froala activation key. If specified, this
         * take precedence over the activation key configured in your application's
         * `app.json`.
         */
        activationKey: undefined,
 
        /**
         * @cfg {Object} defaultEditor The default Froala editor configs passed to the Froala
         * constructor. This value is merged with the {@link #editor} config you specify. This can
         * only be specified at time of creation and cannot be set later.
         */
        defaultEditor: {
            iconsTemplate: 'font_awesome_5'
        },
 
        /**
         * @cfg {String} value
         * The text content of the editor.
         */
        value: '',
 
        /**
         * A Froala config object as documented at
         * https://www.froala.com/wysiwyg-editor/docs/options
         * This config is set once, upon creation of the FroalaEditor and cannot be updated later.
         * The most commonly provided value is `toolbarButtons`, which defaults to
         * editor: {
         *    toolbarButtons: {
         *     'moreText': {
         *     'buttons': ['bold', 'italic', 'underline', 'strikeThrough',
         *       'subscript', 'superscript', 'fontFamily',
         *       'fontSize', 'textColor', 'backgroundColor', 'inlineClass',
         *       'inlineStyle', 'clearFormatting'
         *      ]
         *     },
         *     'moreParagraph': {
         *       'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight',
         *           'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle',
         *           'lineHeight', 'outdent', 'indent', 'quote'
         *        ]
         *     },
         *   'moreRich': {
         *     'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable',
         *       'emoticons', 'fontAwesome', 'specialCharacters', 'embedly',
         *       'insertFile', 'insertHR'
         *      ]
         *   },
         *   'moreMisc': {
         *     'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker',
         *       'selectAll', 'html', 'help'
         *      ],
         *     'align': 'right',
         *     'buttonsVisible': 2
         *   }
         * }
         * }
         */
        editor: {}
    },
 
    /**
     * @property {Boolean} isFroalaEditor
     * Identifies this class and its subclasses.
     * @readonly
     */
    isFroalaEditor: true,
 
    /**
     * @property {Boolean} isReady
     * Flags whether the Froala editor instance has been initialized. Initialization
     * happens automatically when the component is created, but takes several milliseconds.
     * Upon initialization, the {@link #event-ready} event is fired.
     * @readonly
     */
    isReady: false,
 
    applyEditor: function(config) {
        var me = this,
            froalaEditor;
 
        if (config === null) {
            froalaEditor = me.getEditor();
            froalaEditor.destroy();
            // Froala leaves the innerHTML set to the html value. Since
            // we're being destroyed, clean that up too.
            me.getFroalaEditorDomElement().innerHTML = '';
 
            return null;
        }
 
        return me.createFroalaEditor(config);
    },
 
    createFroalaEditor: function(config) {
        var me = this,
            defaultConfig = me.getDefaultEditor(),
            options,
            froalaEditor,
            key = Ext.manifest.froala,
            froalaEditorDomElement = me.getFroalaEditorDomElement(),
            bufferedChangedEvent = Ext.Function.createBuffered(me.onFroalaContentChanged, 50, me);
 
        // bufferedChangedEvent avoids running the change event more often than necessary.
 
        options = Ext.merge(config, defaultConfig);
 
        key = me.getActivationKey() || (key && key['activation-key']);
 
        if (key) {
            options.key = key;
        }
 
        froalaEditor = new FroalaEditor(froalaEditorDomElement, options, function() {
            froalaEditor.component = me;
            me.monitorConfiguredListeners();
            froalaEditor.isReady = true;
            me.fireEvent('ready', me, froalaEditor);
            froalaEditor.events.on('contentChanged', bufferedChangedEvent);
            froalaEditor.html.set(me.getValue());
        });
        froalaEditor.isReady = false;
 
        return froalaEditor;
    },
 
    onFroalaContentChanged: function() {
        this.setValue(this.getEditor().html.get());
    },
 
    updateValue: function(value) {
        var me = this,
            editor = this.getEditor(),
            editorValue;
 
        if (editor && editor.isReady) {
            editorValue = editor.html.get();
            me.fireEvent('change', me, value);
            // The value won't change if it came from
            // onFroalaContentChanged. Otherwise, someone
            // ran setValue() on the component and the
            // editor's html has to reflect that.
 
            if (value !== editorValue) {
                editor.html.set(value);
            }
        }
    },
 
    updateDisabled: function(disabled) {
        var editor = this.getEditor();
 
        if (editor) {
            editor.edit[disabled ? 'off' : 'on']();
        }
    },
 
    privates: {
        /**
         * Set up Froalaq events specified in the listeners:{} block. 
         * For non-Froala events, using listeners:{} works fine. But 
         * for Froala events, we have to wait until aftr the Froala 
         * instance is created before we can add listeners to it. This
         * method is run one time, immediately after the Froala 
         * instance has been created.
         */
        monitorConfiguredListeners: function(froalaEditor) {
            // Assert: froalaListenersConfig has been inialized with 
            // the original Froala event names (which may be camel-case).
 
            // By the time we get here, the ExtJS framework takes the
            // names from listeners:{} and puts then into hasListeners,
            // which are all lower case. froalaListenersConfigNames maps
            // the lowercase name to the original name
 
            var me = this,
                originalName,
                eventNames = Object.keys(me.hasListeners);
 
            eventNames.forEach(function(event) {
                if (me.isFroalaEvent(event)) {
                    originalName = me.froalaListenersConfigNames[event];
                    me.setupListener(originalName);
                }
            });
        },
 
        froalaNamePrefixRe: /froala\./,
 
        /**
         * @param {String} event - The event name being checked.
         * @returns {Boolean} true if the event is a Froala event.
         */
        isFroalaEvent: function(event) {
            return !!event.match(this.froalaNamePrefixRe);
        },
 
        translateFroalaEventName: function(event) {
            return event.replace(this.froalaNamePrefixRe, '');
        },
 
        setupListener: function(event) {
            var me = this,
                froalaEditor = me.getEditor(),
                translatedFroalaEventName,
                froalaEventsBeingMonitored;
 
            // This method is called from two places:
            // - When a listener is added procedurally, via on(), after the
            //   Froala editor instance exists.
            // - One time immediately after the Froala editor instance is
            //   created, in order to add the items in listeners:{}
            // 
            // Upon entry, the event has already been added to this Observable.
            // But for Froala events, we need to add a listener to the Froala
            // instance. If it's not a Froala event, just ignore it and the
            // event will get fired in the normal way. 
 
            if (!me.isFroalaEvent(event)) {
                return;
            }
 
            // Add the event to Froala, passing an event handler. The handler
            // simply fires the event via Observable. That means we only need
            // to setup the Froala event once. The flow is: Froala detects the
            // event, Froala calls the one event handler which then fires the
            // event, and Observable takes care of informing all listeners.
 
            froalaEventsBeingMonitored = me.getFroalaEventsBeingMonitored();
 
            if (!froalaEventsBeingMonitored[event]) {
                translatedFroalaEventName = me.translateFroalaEventName(event);
                froalaEditor.events.on(translatedFroalaEventName, createHandler(event, me));
                froalaEventsBeingMonitored[event] = true;
            }
 
            function createHandler(name) {
                // Return the froala event handler. The event handler simply
                // fires the component event via fireEventArgs(), using the
                // name in closure scope. This component is passed as the
                // first argument, followed by the Froala arguments.
                return function() {
                    var args = Array.prototype.slice.call(arguments);
 
                    args.unshift(me);
                    me.fireEventArgs(name, args);
                };
            }
        },
 
        handleAddListener: function(ename) {
            var me = this,
                froalaEditor,
                isBeingRunFromListenersConfig;
 
            if (!me.isFroalaEvent(ename)) {
                return;
            }
 
            // This method is called by the overridden doAddListener
            // from Editor or EditorField. It's run whenever a listener
            // is being added, either via a listeners:{} config or via
            // view.on(). If this is called after initialization (and
            // froalaEditor.isReady is true), then set up the Foala 
            // listener with the editor instance. But if it's run via 
            // the component config, and therefore, before the editor
            // exists, then we need to remember the event name and add
            // it later, after the editor is created. That's done in
            // monitorConfiguredListeners().
 
            froalaEditor = me.getEditor();
            isBeingRunFromListenersConfig = !(froalaEditor && froalaEditor.isReady);
 
            if (isBeingRunFromListenersConfig) {
                // ename may be camel-case. But when ExtJS initialized listeners:{}
                // and updates hasListeners, those events are changed to lowercase.
                // Therefore, save the lowercase name and associate it with the original
                // name.
                me.froalaListenersConfigNames[ename.toLowerCase()] = ename;
            }
            else {
                me.setupListener(ename);
            }
        },
        froalaListenersConfigNames: {},
 
        handleRemoveListener: function(ename) {
            var me = this,
                froalaEditor = me.getEditor();
 
            if (!(froalaEditor && froalaEditor.isReady)) {
                return;
            }
 
            // If this is an event we're monitoring on the Froala instance,
            // but there are no longer any listeners, then tell Froala to stop
            // monitored.
            if (me.isFroalaEvent(ename)) {
                if (!me.hasListeners[ename]) {
                    // TODO: A future release of Froala will have an "off()" event,
                    // used to remove an event listener. When that's addded, use
                    // this code to clean up listeners. This is un-tested code.
 
                    // froalaEditor.events.off(ename);
                    delete me.getFroalaEventsBeingMonitored()[ename];
                }
            }
        },
 
        getFroalaEventsBeingMonitored: function() {
            return (this.froalaEventsBeingMonitored = this.froalaEventsBeingMonitored || {});
        }
    },
 
    getFroalaEditorDomElement: function() {
        Ext.raise('getFroalaEditorDomElement must be overridden in the class using froala/Mixins');
    }
});