define(['dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/dom-geometry',
  'dojo/dom-style',
  'dojo/dom-class',
  'dojo/dom-construct',
  'dojo/fx',
  'dojo/on',
  'dojo/query',
  'dojo/aspect',
  'jimu/BaseWidget',
  'jimu/PoolControllerMixin',
  './DockableItem',
  './GroupItems',
  './PopupMoreNodes'
  ], function(declare, lang, array, domGeometry, domStyle, domClass, domConstruct, coreFx, on,
  query, aspect, BaseWidget, PoolControllerMixin, DockableItem, GroupItems, PopupMoreNodes){
  /* global jimuConfig*/
  var MIN_MARGIN = 8, ICON_SIZE = 40, ICON_IMG_SIZE = 20, BUTTON_SIZE = 60,
      NORMAL_MODE = 1, MOBILE_MODE = 2;
  /**
   * @exports themes/LaunchpadTheme/widgets/AnchorBarController/Widget
   */
  var clazz = declare([BaseWidget, PoolControllerMixin], {
    baseClass: 'jimu-anchorbar-controller',

    visibleIcons: 0,
    iconList: [],
    enableNext: false,
    enablePrevious: false,
    currentMode: NORMAL_MODE,
    iconMargin: MIN_MARGIN,
    groupList: [],
    openedIds: [],
    currentStyle: 'default',

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

      this.iconList = [];
      this.groupList = [];
      this.openedIds = [];
      this.currentStyle = this.appConfig.theme.styles[0];
      this.allConfigs = this.getAllConfigs();

      array.forEach(this.allConfigs, function(configItem, index){
        this._createItem(configItem, index);
      }, this);
    },

    _createItem: function(configItem, index){
      var item, itemGroup, containerNode;
      item = new DockableItem({
        config: configItem,
        backgroundIndex: index
      });
      item.placeAt(this.iconGroupNode);
      this.iconList.push(item);

      if(item.isGroup()){
        //create widget group icon
        itemGroup = new GroupItems({
          config: configItem,
          dockableItem: item
        });

        if(window.appInfo.isRunInMobile){
          containerNode = jimuConfig.layoutId;
        }else{
          containerNode = jimuConfig.mapId;
        }
        itemGroup.placeAt(containerNode);
        domStyle.set(itemGroup.domNode, 'display', 'none');

        this.own(on(itemGroup, 'groupItemClicked', lang.hitch(this, function(data){
          this._onDockableNodeClick(data.target);
        })));

        this.own(on(item, 'nodeClick', lang.hitch(this, function(data){
          this._onGroupNodeClick(data.target, itemGroup);
        })));

        this.groupList.push(itemGroup);
      }else{
        this.own(on(item, 'nodeClick', lang.hitch(this, function(data){
          this._onDockableNodeClick(data.target);
        })));
      }

      return item;
    },

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

      // handle open at start widget, only one is allowed to open at start
      array.some(this.iconList, function(iconItem, index){
        if(iconItem.isOpenAtStart()){
          if(!window.appInfo.isRunInMobile){
            this._makeIconVisible(index);
          }
          iconItem._onNodeClick();
          return true;
        }
      }, this);
    },

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

      array.forEach(this.groupList, function(widgetGroup){
        widgetGroup.destroy();
      });
    },

    onAction: function(action, data) {
      /*jshint unused: false*/
      if (action === 'highLight' && data) {
        var node = query('div[settingid="' + data.widgetId + '"]', this.domNode)[0];
        this._highLight(node);
      }
      if (action === 'removeHighLight') {
        this._removeHighLight();
      }
    },

    onOpen: function(){
      if(this.iconList.length === 0 && this.appConfig.mode !== 'config'){
        this.widgetManager.closeWidget(this);
      }
    },

    onAppConfigChanged: function(appConfig){
      this.currentStyle = appConfig.theme.styles[0];
    },

    /**
     * @override
     * @param {[type]} ids [description]
     */
    setOpenedIds: function(ids) {
      var item;
      if (ids.length === 0) {
        return;
      }
      array.forEach(ids, function(id){
        item = this._getIconItemById(id);
        if(item !== null){
          item._onNodeClick();
        }
      }, this);
    },

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

      return array.filter(this.openedIds, function(item){
        return typeof item !== 'undefined';
      });
    },

    _highLight: function(node) {
      if (this.hlDiv) {
        this._removeHighLight();
      }
      if (!node || domStyle.get(node, 'display') === 'none') {
        return;
      }
      var marginLeft = domStyle.get(node, 'margin-left');
      var position = domGeometry.getMarginBox(node);
      var hlStyle = {
        position: 'absolute',
        left: (position.l + marginLeft) + 'px',
        top: (position.t) + 'px',
        width: ICON_SIZE + 'px',
        height: ICON_SIZE + 'px'
      };
      if(this.currentStyle !== 'style2'){
        hlStyle['margin-top'] = (-ICON_SIZE / 2) + 'px';
      }
      this.hlDiv = domConstruct.create('div', {
        "style": hlStyle,
        "class": 'icon-highlight'
      }, node, 'before');
    },

    _removeHighLight: function() {
      if (this.hlDiv) {
        domConstruct.destroy(this.hlDiv);
        this.hlDiv = null;
      }
    },

    clearIconGroupNode: function(){
      while(this.iconGroupNode.firstChild) {
        this.iconGroupNode.removeChild(this.iconGroupNode.firstChild);
      }
    },

    resize: function(){
      if(window.appInfo.isRunInMobile){
        if(this.currentMode === NORMAL_MODE){
          //mode changed
          this.currentMode = MOBILE_MODE;
          domClass.add(this.domNode, 'mobile');
          this.clearIconGroupNode();
          this.lastVisibleIcons = 0;
        }

        if(this.popupMore){
          this.popupMore.hide();
        }

        this.switchToMobileStyle();
      }else{
        if(this.currentMode === MOBILE_MODE){
          //mode changed
          this.currentMode = NORMAL_MODE;
          domClass.remove(this.domNode, 'mobile');
          this.clearIconGroupNode();
          this.lastVisibleIcons = 0;

          //set width of iconGroupNode large enough to hold all the icons
          domStyle.set(this.iconGroupNode, 'width',
              this.allConfigs.length * 2 * ICON_SIZE + 'px');

          array.forEach(this.iconList, function(iconItem){// recreate icon list once
            iconItem.placeAt(this.iconGroupNode);
          }, this);
        }

        this.switchToNormalStyle();
      }
      this._resizeOpenedPanel();
    },

    switchToMobileStyle: function(){
      var mapBox, containerSize, iconGroupWidth;

      mapBox = domGeometry.getContentBox(jimuConfig.mapId);
      containerSize = mapBox.w;

      iconGroupWidth = Math.max(containerSize, this.allConfigs.length * 2 * ICON_SIZE);
      //set width of iconGroupNode large enough to hold all the icons
      domStyle.set(this.iconGroupNode, 'width', iconGroupWidth + 'px');

      //calculate widgets
      this.visibleIcons = Math.floor(containerSize / (ICON_SIZE + MIN_MARGIN));
      if(this.visibleIcons >= this.iconList.length){
        this.visibleIcons = this.iconList.length;
      }

      if(this.visibleIcons !== this.lastVisibleIcons){
        this.lastVisibleIcons = this.visibleIcons;
        this.clearIconGroupNode();
        this._reArrangeIconItems(containerSize);
      }else{
        this._adjustIconMargin(containerSize);
      }
    },

    _reArrangeIconItems: function(currentWidth){
      var showMore, normalIconNumber, moreIconItem, moreItemArray = [], args;

      showMore = this.visibleIcons < this.iconList.length;
      normalIconNumber = showMore ? (this.visibleIcons - 1) : this.visibleIcons;
      this.iconMargin = Math.floor((currentWidth - (this.visibleIcons * ICON_SIZE)) /
          (this.visibleIcons + 1));

      array.forEach(this.iconList, function(item, index){
        //clear styles set in PopupMoreNodes.js
        args = {
          display: '',
          position: '',
          left: '',
          top: ''
        };
        //reset the size of iconItem and image
        domStyle.set(item.iconItemNode, {
          width: ICON_SIZE + 'px',
          height: ICON_SIZE + 'px'
        });
        domStyle.set(item.imgNode, {
          width: ICON_IMG_SIZE + 'px',
          height: ICON_IMG_SIZE + 'px'
        });
        if(index < normalIconNumber){
          if(window.isRTL){
            args['margin-right'] = this.iconMargin + 'px';
          }else{
            args['margin-left'] = this.iconMargin + 'px';
          }
          domStyle.set(item.domNode, args);
          item.placeAt(this.iconGroupNode);
        }else{
          domStyle.set(item.domNode, args);
          moreItemArray.push(item);
        }
      }, this);

      if(showMore){
        moreIconItem = this._createIconItemForMore();
        args = {};
        if(window.isRTL){
          args['margin-right'] = this.iconMargin + 'px';
        }else{
          args['margin-left'] = this.iconMargin + 'px';
        }
        domStyle.set(moreIconItem.domNode, args);
        moreIconItem.placeAt(this.iconGroupNode);

        this.own(on(moreIconItem, 'nodeClick', lang.hitch(this, function(data){
          this._onShowMoreNodeClick(data.target, moreItemArray);
        })));
      }
    },

    _createIconItemForMore: function(){
      var moreIconItem = new DockableItem({
        config: {
          id: 'show_more_widget_icons',
          label: this.nls.more,
          icon: this.folderUrl + 'images/more_icon.png'
        },
        backgroundIndex: this.visibleIcons
      });

      return moreIconItem;
    },

    _adjustIconMargin: function(currentWidth){
      var args = {};
      this.iconMargin = Math.floor((currentWidth - (this.visibleIcons * ICON_SIZE)) /
          (this.visibleIcons + 1));

      if(window.isRTL){
        args['margin-right'] = this.iconMargin + 'px';
      }else{
        args['margin-left'] = this.iconMargin + 'px';
      }

      query('div.jimu-anchorbar-iconitem', this.iconGroupNode).forEach(function(node){
        domStyle.set(node, args);
      }, this);
    },

    switchToNormalStyle: function(){
      var mapBox, widgetWidth, left, containerSize,
          firstVisible = 0, lastVisible;

      mapBox = domGeometry.getContentBox(jimuConfig.mapId);
      widgetWidth = Math.floor(mapBox.w / 2);

      if(widgetWidth > this.allConfigs.length * (ICON_SIZE + MIN_MARGIN) + BUTTON_SIZE){
        widgetWidth = this.allConfigs.length * (ICON_SIZE + MIN_MARGIN) + BUTTON_SIZE;
      }
      left = Math.floor((mapBox.w - widgetWidth) / 2);

      domStyle.set(this.domNode, {
        width: widgetWidth + 'px',
        left: left + 'px'
      });

      //calculate widgets
      containerSize = widgetWidth - BUTTON_SIZE;
      this.visibleIcons = Math.floor(containerSize / (ICON_SIZE + MIN_MARGIN));
      if(this.visibleIcons > this.iconList.length){
        this.visibleIcons = this.iconList.length;
      }

      //calculate the visible range
      array.some(this.iconList, function(item, index){
        if(item.visible){
          firstVisible = index;
          return true;
        }
      });

      lastVisible = firstVisible + this.visibleIcons - 1;
      if(lastVisible >= this.iconList.length){
        lastVisible = this.iconList.length - 1;
        firstVisible = lastVisible - this.visibleIcons + 1;
      }

      this.iconMargin = Math.floor((containerSize - (this.visibleIcons * ICON_SIZE)) /
          (this.visibleIcons + 1));

      this._adjustIconStyle(firstVisible, lastVisible);
    },

    _previous: function(){
      var idxFirst = -1, idxLast = -1, animArray = [];
      if(this.enablePrevious){
        //find the first visible iconItem
        array.some(this.iconList, function(iconItem, index){
          if(iconItem.visible){
            idxFirst = index - 1;//get the previous item index
            return true;
          }
        }, this);

        if(idxFirst >= 0){
          idxLast = idxFirst + this.visibleIcons;
          animArray = animArray.concat(this.iconList[idxLast].hideAnim(this.iconMargin),
              this.iconList[idxFirst].showAnim(this.iconMargin));
          coreFx.combine(animArray).play();

          this.enableNext = true;
          domClass.add(this.nextButton, 'enabled');

          if(idxFirst === 0){
            this.enablePrevious = false;
            domClass.remove(this.previousButton, 'enabled');
          }
        }
      }
    },

    _next: function(){
      var idxFirst = -1, idxLast = -1, animArray = [];
      if(this.enableNext){
        //find the first visible iconItem
        array.some(this.iconList, function(iconItem, index){
          if(iconItem.visible){
            idxFirst = index;
            return true;
          }
        }, this);

        if(idxFirst >= 0){
          idxLast = idxFirst + this.visibleIcons;
          animArray = animArray.concat(this.iconList[idxFirst].hideAnim(this.iconMargin),
              this.iconList[idxLast].showAnim(this.iconMargin));
          coreFx.combine(animArray).play();

          this.enablePrevious = true;
          domClass.add(this.previousButton, 'enabled');

          if(idxLast === this.iconList.length - 1){
            this.enableNext = false;
            domClass.remove(this.nextButton, 'enabled');
          }
        }
      }
    },

    _getGroupPanelPosition: function(dockableItem, widgetBox){
      var position = {},
        iconBox = domGeometry.position(dockableItem.iconItemNode),
        mapBox = domGeometry.getContentBox(jimuConfig.mapId);

      position.top = iconBox.y - widgetBox.h - MIN_MARGIN;

      if (window.isRTL) {
        if(iconBox.x < widgetBox.w + MIN_MARGIN){
          position.left = MIN_MARGIN;
        }else{
          position.left = iconBox.x - widgetBox.w + iconBox.w;
        }
      } else {
        if(iconBox.x + widgetBox.w + MIN_MARGIN > mapBox.w){
          position.left = mapBox.w - widgetBox.w - MIN_MARGIN;
        }else{
          position.left = iconBox.x;
        }
      }
      return position;
    },

    //off panel widget position
    _getOffPanelPosition: function(dockableItem, widgetBox){
      var position = {},
          iconBox = domGeometry.position(dockableItem.iconItemNode),
          mapBox = domGeometry.getContentBox(jimuConfig.mapId);

      position.bottom = mapBox.h - (iconBox.y + MIN_MARGIN) + ICON_SIZE / 2;

      if (window.isRTL) {
        if(iconBox.x < widgetBox.w + MIN_MARGIN){
          position.right = mapBox.w - widgetBox.w - MIN_MARGIN;
        }else{
          position.right = iconBox.x - widgetBox.w;
        }
      } else {
        if(iconBox.x + widgetBox.w + MIN_MARGIN > mapBox.w){
          position.left = mapBox.w - widgetBox.w - MIN_MARGIN;
        }else{
          position.left = iconBox.x;
        }
      }
      if(dockableItem.config.position) {
        position.relativeTo = dockableItem.config.position.relativeTo;
      }
      return position;
    },

    _createPopupMoreNodes: function(){
      if(!this.popupMore){
        this._createCoverNode();

        this.popupMore = new PopupMoreNodes();
        this.popupMore.placeAt(jimuConfig.mapId);

        aspect.after(this.popupMore, 'show', lang.hitch(this, function() {
          domStyle.set(this.moreIconPaneCoverNode, 'display', '');
        }), true);

        aspect.after(this.popupMore, 'hide', lang.hitch(this, function() {
          domStyle.set(this.moreIconPaneCoverNode, 'display', 'none');
        }), true);
      }
    },

    _onShowMoreNodeClick: function(dockableItem, moreItemsArray){
      this._createPopupMoreNodes();

      if(dockableItem.isOpen){
        this.popupMore.setForIcon(dockableItem);
        this.popupMore.setNodes(moreItemsArray);
        this.popupMore.show();
      }else{
        this.popupMore.hide();
      }
    },

    _getIconItemById: function(id){
      var ret = null;

      array.some(this.iconList, function(item){
        if(item.config.id === id){
          ret = item;
          return true;
        }
      });

      if(ret === null){
        array.some(this.groupList, function(groupItem){
          return array.some(groupItem.getItemList(), function(item){
            if(item.config.id === id){
              ret = item;
              return true;
            }
          });
        });
      }

      return ret;
    },

    _addToOpenedIds: function(id){
      if(this.openedIds.indexOf(id) === -1){
        this.openedIds.push(id);
      }
    },

    _removeFromOpenedIds: function(id){
      var idx = this.openedIds.indexOf(id);
      if(idx !== -1){
        this.openedIds[idx] = undefined;
      }
    },

    _onGroupNodeClick: function(dockableItem, groupItem){
      var position;

      if(dockableItem.isOpen){
        position = this._getGroupPanelPosition(dockableItem, groupItem.box);
        groupItem.setPosition(position);
        groupItem.open();
        this._addToOpenedIds(dockableItem.config.id);
      }else{
        groupItem.close();
        this._removeFromOpenedIds(dockableItem.config.id);
      }
    },

    _onDockableNodeClick: function(dockableItem){
      var panelId, panelConfig;
      if(dockableItem.config.inPanel === false){
        if(dockableItem.isOpen){
          this.widgetManager.loadWidget(dockableItem.config).then(
              lang.hitch(this, function(widget) {
            this._addToOpenedIds(dockableItem.config.id);

            var position = this._getOffPanelPosition(dockableItem,
                this.widgetManager.getWidgetMarginBox(widget));
            position.zIndex = 100;
            widget.setPosition(position, this.containerNode);
            this.widgetManager.openWidget(widget);

            this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
              dockableItem.setOpened(false);
              this._removeFromOpenedIds(dockableItem.config.id);
            })));
          }));
        }else{
          this.widgetManager.closeWidget(dockableItem.config.id);
          this._removeFromOpenedIds(dockableItem.config.id);
        }
      }else{
        panelId = dockableItem.config.id + '_panel';
        if(dockableItem.isOpen){
          dockableItem.setPanelIndex(this._calPanelIndex());
          panelConfig = dockableItem.getConfigForPanel();

          this.panelManager.showPanel(panelConfig).then(lang.hitch(this, function(panel){
            panel.setPosition(panelConfig.panel.position);
            aspect.after(panel, 'onClose', lang.hitch(this, function(){
              dockableItem.setOpened(false);
              this._removeFromOpenedIds(dockableItem.config.id);
            }));
          }));

          if(this.popupMore){
            this.popupMore.hide();
          }
          this._addToOpenedIds(dockableItem.config.id);
        }else{
          this.panelManager.closePanel(panelId);
          this._removeFromOpenedIds(dockableItem.config.id);
        }
      }
    },

    _calPanelIndex: function(){
      var openedList = [], i, len;

      //collect panel index of opened widget.
      array.forEach(this.iconList, function(item){
        if(!item.isGroup() && item.config.inPanel !== false && item.isOpen){
          openedList.push(item.getPanelIndex());
        }
      });
      array.forEach(this.groupList, function(groupItem){
        array.forEach(groupItem.getItemList(), function(item){
          if(item.config.inPanel !== false && item.isOpen){
            openedList.push(item.getPanelIndex());
          }
        });
      });

      if(openedList.length === 0){
        return 0;
      }

      //sort asc
      openedList.sort(function(a, b){
        return a - b;
      });

      //Find the smallest panel index that is not used.
      if(openedList[0] > 0){
        return 0;
      }

      for(i = 0, len = openedList.length - 1 ; i < len; i++){
        if(openedList[i + 1] - openedList[i] > 1){
          return openedList[i] + 1;
        }
      }

      return openedList[len] + 1;
    },

    _createCoverNode: function() {
      this.moreIconPaneCoverNode = domConstruct.create('div', {
        'class': 'jimu-more-icon-cover'
      }, jimuConfig.layoutId);
    },

    _resizeOpenedPanel: function(){
      var panel;
      //collect panel index of opened widget.
      array.forEach(this.iconList, function(item){
        if(!item.isGroup() && item.config.inPanel !== false && item.isOpen){
          panel = this.panelManager.getPanelById(item.config.id + '_panel');
          if(panel){
            panel.onWindowResize();
          }
        }
      }, this);
      array.forEach(this.groupList, function(groupItem){
        array.forEach(groupItem.getItemList(), function(item){
          if(item.config.inPanel !== false && item.isOpen){
            panel = this.panelManager.getPanelById(item.config.id + '_panel');
            if(panel){
              panel.onWindowResize();
            }
          }
        }, this);
      }, this);
    },

    /**
     * Used by open at start widget. Make the widget icon at the center of the anchor bar.
     * @param  {number} index [description]
     */
    _makeIconVisible: function(index){
      var firstVisible, lastVisible;
      if(this.visibleIcons === this.iconList.length){
        return;
      }

      firstVisible = index - Math.floor(this.visibleIcons / 2);
      firstVisible = firstVisible >= 0 ? firstVisible : 0;
      lastVisible = firstVisible + this.visibleIcons - 1;
      if(lastVisible >= this.iconList.length){
        lastVisible = this.iconList.length - 1;
        firstVisible = lastVisible - this.visibleIcons + 1;
      }

      this._adjustIconStyle(firstVisible, lastVisible);
    },

    _adjustIconStyle: function(firstVisible, lastVisible){
      var args;
      array.forEach(this.iconList, function(iconItem, index){
        iconItem.visible = index >= firstVisible && index <= lastVisible;
        args = {
          position: '',
          left: '',
          top: '',
          display: iconItem.visible ? '' : 'none'
        };
        if(window.isRTL){
          args['margin-right'] = this.iconMargin + 'px';
        }else{
          args['margin-left'] = this.iconMargin + 'px';
        }
        domStyle.set(iconItem.domNode, args);
        domStyle.set(iconItem.iconItemNode, {
          width: ICON_SIZE + 'px',
          height: ICON_SIZE + 'px'
        });
        domStyle.set(iconItem.imgNode, {
          width: ICON_IMG_SIZE + 'px',
          height: ICON_IMG_SIZE + 'px'
        });
      }, this);

      if(lastVisible < this.allConfigs.length - 1){
        domClass.add(this.nextButton, 'enabled');
        this.enableNext = true;
      }else{
        domClass.remove(this.nextButton, 'enabled');
        this.enableNext = false;
      }

      if(firstVisible > 0){
        this.enablePrevious = true;
        domClass.add(this.previousButton, 'enabled');
      }else{
        this.enablePrevious = false;
        domClass.remove(this.previousButton, 'enabled');
      }
    }
  });
  return clazz;
});