define(['dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/dom-class',
  'dojo/dom-style',
  'dojo/on',
  'dojo/mouse',
  'dojo/Evented',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/popup',
  'dijit/TooltipDialog',
  'dojo/text!./BaseIconItem.html'
  ], function(declare, lang, domClass, domStyle, on, mouse, Evented,
  _WidgetBase, _TemplatedMixin, popup, TooltipDialog, template){
  var PANEL_WIDTH = 350, PANEL_HEIGHT = 480, MIN_MARGIN = 10,
      BACKGROUND_COLOR_COUNT = 6;
  /**
   * @exports themes/LaunchpadTheme/widgets/AnchorBarController/BaseIconItem
   */
  var clazz = declare([_WidgetBase, _TemplatedMixin, Evented], {
    baseClass: 'jimu-anchorbar-iconitem jimu-float-leading',
    templateString: template,
    /**
     * Widget info, read only
     * @type {object} - Include label and uri.
     */
    config: null,
    backgroundIndex: -1,
    /**
     * Whether this widget is opened.
     * @type {Boolean}
     */
    isOpen: false,
    /**
     * The index of this widget in the widget list. It is used to calculate position when
     * opened in panel.
     * @type {Number}
     */
    panelIndex: -1,

    /**
     * The size of the icon item.
     * @type {Number}
     */
    size: 40,

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

      this.tooltipDialog = new TooltipDialog({
        'content': this.config.label,
        'class': "launchpad-tooltip"
      });

      domClass.add(this.iconItemNode, 'icon-item-background' + this.getBackgroundColorIndex());

      this.own(on(this.iconItemNode, mouse.enter, lang.hitch(this, function(){
        if(!window.appInfo.isRunInMobile){
          popup.open({
            parent: this,
            popup: this.tooltipDialog,
            around: this.iconItemNode,
            orient: ['above-centered'],
            onCancel: lang.hitch(this, function(){
              popup.close(this.tooltipDialog);
            })
          });
        }
      })));

      this.own(on(this.iconItemNode, mouse.leave, lang.hitch(this, function(){
        if(!window.appInfo.isRunInMobile){
          popup.close(this.tooltipDialog);
        }
      })));
    },

    getConfigForPanel: function(){
      var panelConfig = lang.clone(this.config);
      panelConfig.backgroundColor = this.getColor();
      panelConfig.panel.position = this._initPosition();
      panelConfig.panel.position.index = this.panelIndex;

      return panelConfig;
    },

    /**
     * Calculate initial position of the panel containing this widget.
     * @private
     * @return {object} position object, contains left, right, width and height
     */
    _initPosition: function(){
      return {
        top: window.appInfo.isRunInMobile ? 20 : 120,
        left: MIN_MARGIN,
        width: PANEL_WIDTH,
        height: PANEL_HEIGHT,
        margin: MIN_MARGIN
      };
    },

    /**
     * Event handler when user click this node.
     * @private
     */
    _onNodeClick: function(){
      domClass.toggle(this.iconItemStatus, 'selected');
      domClass.toggle(this.iconItemNode, 'selected');
      this.isOpen = domClass.contains(this.iconItemNode, 'selected');

      if(!this.isOpen){
        this.panelIndex = -1;
      }

      this.emit('nodeClick', {
        target: this
      });
    },

    /**
     * Check if this item is a widget group.
     * @return {Boolean} Return true if this is a widget group, or false if this is a single widget.
     */
    isGroup: function(){
      if(this.config.widgets && this.config.widgets.length > 1){
        return true;
      }else{
        return false;
      }
    },

    isOpenAtStart: function(){
      return this.config && this.config.openAtStart === true;
    },

    setOpened: function(value){
      if(value){
        if(this.iconItemStatus){
          domClass.add(this.iconItemStatus, 'selected');
        }
        if(this.iconItemNode){
          domClass.add(this.iconItemNode, 'selected');
        }

        this.isOpen = true;
      }else{
        if(this.iconItemStatus){
          domClass.remove(this.iconItemStatus, 'selected');
        }
        if(this.iconItemNode){
          domClass.remove(this.iconItemNode, 'selected');
        }
        this.isOpen = false;
        this.panelIndex = -1;
      }
    },

    getPanelIndex: function(){
      return this.panelIndex;
    },

    setPanelIndex: function(theValue){
      this.panelIndex = theValue;
    },

    getColor: function(){
      return domStyle.get(this.iconItemNode, 'background-color') || '#FFFFFF';
    },

    getBackgroundColorIndex: function(){
      return this.backgroundIndex % BACKGROUND_COLOR_COUNT;
    }
  });
  return clazz;
});