///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
//
// 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.
///////////////////////////////////////////////////////////////////////////

define(['dojo/_base/declare',
  'dojo/_base/array',
  'dojo/_base/lang',
  'dojo/fx',
  'dojo/on',
  'dojo/Evented',
  'dojo/dom-style',
  'dojo/dom-class',
  'dojo/dom-geometry',
  'dojo/dnd/move',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dojo/text!./GroupItems.html',
  './BaseIconItem'
  ], function(declare, array, lang, coreFx, on, Evented, domStyle, domClass,
  domGeometry, Move, _WidgetBase, _TemplatedMixin, template, BaseIconItem){
  /* global jimuConfig */
  /**
   * @exports themes/LaunchpadTheme/widgets/AnchorBarController/GroupItems
   */
  var clazz = declare([_WidgetBase, _TemplatedMixin, Evented], {
    baseClass: 'jimu-anchorbar-controller-group',
    templateString: template,
    /**
     * Widget info.
     * @type {object} - Include label and uri.
     */
    config: null,
    dockableItem: null,
    backgroundColor: null,
    itemList: [],
    box: null,

    postCreate: function() {
      this.inherited(arguments);

      //create widget group
      array.forEach(this.config.widgets, function(widgetConfig, subIndex){
        var groupItem = new BaseIconItem({
          config: widgetConfig,
          backgroundIndex: subIndex
        });
        groupItem.placeAt(this.containerNode);

        this.own(on(groupItem, 'nodeClick', lang.hitch(this, this._onIconClick)));
        this.itemList.push(groupItem);
      }, this);

      domClass.add(this.colorfulHeader, 'icon-item-background' +
          this.dockableItem.getBackgroundColorIndex());
    },

    startup: function(){
      this.inherited(arguments);

      this.box = domGeometry.getMarginBox(this.domNode);
      this.makeMoveable(this.titleNode, this.box);
    },

    getItemList: function(){
      return this.itemList;
    },

    makeMoveable: function(handleNode, box) {
      var containerBox;
      this.disableMoveable();

      containerBox = domGeometry.getMarginBox(jimuConfig.layoutId);
      containerBox.l = containerBox.l - box.w * 0.5;
      containerBox.w = containerBox.w + box.w;

      this.moveable = new Move.boxConstrainedMoveable(this.domNode, {
        box: containerBox,
        handle: handleNode || this.titleNode,
        within: true
      });
      this.own(on(this.moveable, 'Moving', lang.hitch(this, this.onMoving)));
      this.own(on(this.moveable, 'MoveStop', lang.hitch(this, this.onMoveStop)));
    },

    getItemNum: function(){
      return this.config.widgets.length;
    },

    disableMoveable: function() {
      if (this.moveable) {
        this.moveable.destroy();
        this.moveable = null;
      }
    },

    onMoving: function(mover) {
      domStyle.set(mover.node, 'opacity', 0.9);
    },

    onMoveStop: function(mover) {
      domStyle.set(mover.node, 'opacity', 1);
    },

    open: function(){
      coreFx.wipeIn({
        node: this.domNode,
        duration: 400
      }).play();
    },

    close: function(){
      coreFx.wipeOut({
        node: this.domNode,
        duration: 400
      }).play();
      this.dockableItem.setOpened(false);
    },

    closeImmedaite: function(){
      domStyle.set(this.domNode, 'display', 'none');
      this.dockableItem.setOpened(false);
    },

    _onCloseBtnClicked: function(){
      this.close();
    },

    _onIconClick: function(data) {
      this.emit('groupItemClicked', lang.mixin({
        group: this
      }, data));
    },

    setPosition: function(pos){
      var style = {
        top: typeof pos.top === 'number' ? pos.top + 'px' : 'auto',
        left: typeof pos.left === 'number' ? pos.left + 'px' : 'auto',
        right: typeof pos.right === 'number' ? pos.right + 'px' : 'auto'
      };
      domStyle.set(this.domNode, style);
    }
  });
  return clazz;
});