/*
 *  Copyright 2017 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/**
 * This is a controller for inserting an array in a RichText field.
 * @private
 */
Ext.define('Ametys.plugins.cms.editor.controller.TabCreatorController', {
    extend: 'Ametys.cms.editor.EditorButtonController',

    createUI: function(size, colspan)
    {
        var elmt = this.callParent(arguments);

        elmt.addListener('menushow', this._onMenuShow, this);

        return elmt;
    },

    _getMenuPanel: function ()
    {
        var menuPanelCfg = Ext.applyIf({
            title: "{{i18n CONTENT_EDITION_TABLE_INSERT_LABEL}}",
            html: this._createTabCreator()
        }, this._getMenuSubPanelConfig());

        var menuPanel = Ext.create("Ametys.ui.fluent.ribbon.controls.gallery.MenuPanel", menuPanelCfg);

        var configuredMenuPanels = this.callParent(arguments);
        if (configuredMenuPanels)
        {
            configuredMenuPanels.add(menuPanel);
            return configuredMenuPanels;
        }
        else
        {
            return this._createGalleryWrapper([menuPanel]);
        }
    },

    /**
     * @private
     * Creates an array of squares to choose table dimension
     */
    _createTabCreator: function ()
    {
        this._menuId = Ext.id();
        return Ametys.plugins.cms.editor.Tables.createTabCreator();
    },

    /**
     * Listener on menu show
     * @param {Ext.button.Button} elmt The button that handles the menu
     * @param {Ext.menu.Menu} menu The menu
     */
    _onMenuShow: function (elmt, menu)
    {
        if (elmt._menuInitialized == null)
        {
            var table = menu.el.down("table.insert-table");
            menu.mon(table, "mouseover", Ext.bind(this._onMouseOver, this, [menu], 3));
            menu.mon(table, "mouseleave", Ext.bind(this._onMouseLeave, this, [menu], 3));
            menu.mon(table, "mousedown", Ext.bind(this._onMouseDown, this, [menu], 3));

            elmt._menuInitialized = true;
        }
        var table = menu.el.down("table.insert-table").dom;
        Ametys.plugins.cms.editor.Tables.clearMenuTable(table, Ext.bind(this._setTableTitle, this, [menu], 0));
    },

    /**
     * @private
     * Listener on mouse over the squares in the menus
     * @param {Ext.event.Event} event The event
     * @param {HTMLElement} target The target of the event
     * @param {HTMLElement} obj The object
     * @param {Ext.menu.Menu} menu The menu
     */
    _onMouseOver: function(event, target, obj, menu)
    {
        var table = menu.el.down("table.insert-table").dom;
        Ametys.plugins.cms.editor.Tables.onMouseOver(target, table, Ext.bind(this._saveSize, this), Ext.bind(this._setTableTitle, this, [menu], 0));
    },

    /**
     * @private
     * Listener on mouse leave the squares in the menus
     * @param {Ext.event.Event} event The event
     * @param {HTMLElement} target The target of the event
     * @param {HTMLElement} obj The object
     * @param {Ext.menu.Menu} menu The menu
     */
    _onMouseLeave: function(event, target, obj, menu)
    {
        var table = menu.el.down("table.insert-table").dom;
        Ametys.plugins.cms.editor.Tables.clearMenuTable(table, Ext.bind(this._setTableTitle, this, [menu], 0));
    },

    /**
     * @private
     * Listener on mouse down the squares in the menus
     * @param {Ext.event.Event} event The event
     * @param {HTMLElement} target The target of the event
     * @param {HTMLElement} obj The object
     * @param {Ext.menu.Menu} menu The menu
     */
    _onMouseDown: function(event, target, obj, menu)
    {
        Ametys.plugins.cms.editor.Tables.createTable(this._cellSize+1, this._rowSize+1)
    },

    /**
     * @private
     * Save the selected size
     * @param {Number} rows number of rows
     * @param {Number} cols number of collumns
     */
    _saveSize: function(rows, cols)
    {
        this._rowSize = rows;
        this._cellSize = cols;
    },
    /**
     * @private
     * Change the table title
     * @param {Ext.menu.Menu} menu The menu
     * @param {Number} rows number of rows
     * @param {Number} cols number of collumns
     */
    _setTableTitle: function(menu, rows, cols)
    {
        if (rows >= 0 && cols >= 0)
        {
            this._getGalleries(menu.up()).each(function(gallery) {
                gallery.setTitle("{{i18n CONTENT_EDITION_TABLE_SET_TITLE}}" + " " + (rows+1) + "x" + (cols+1));
            });
        }
        else
        {
            this._getGalleries(menu.up()).each(function(gallery) {
                gallery.setTitle("{{i18n CONTENT_EDITION_TABLE_INSERT_TABLE_TITLE}}");
            });
        }
    }

});