///////////////////////////////////////////////////////////////////////////
// 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',
  'dijit/_WidgetBase',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/_base/html',
  'dojo/on',
  'dojo/Evented',
  '../utils'
],
function(declare, _WidgetBase, lang, array, html, on, Evented, utils) {
  return declare([_WidgetBase, Evented], {
    // summary:
    //    the params format:
    //    items: [{
    //      key:
    //      label: <as innerHTML set to UI>
    //    }]
    //    box: String|DomNode.
    //      if not set, use the menu's parent node to calculate the menu's position.
    'baseClass': 'jimu-dropmenu',
    declaredClass: 'jimu.dijit.DropMenu',


    constructor: function(){
      this.state = 'closed';
    },
    postCreate: function(){
      this.btnNode = html.create('div', {
        'class': 'popup-menu-button'//'jimu-icon-btn'
      }, this.domNode);

      this.own(on(this.btnNode, 'click', lang.hitch(this, this._onBtnClick)));
      if(!this.box){
        this.box = this.domNode.parentNode;
      }
      this.own(on(this.box, 'click', lang.hitch(this, function(){
        if(this.dropMenuNode){
          this.closeDropMenu();
        }
      })));
    },

    _onBtnClick: function(evt){
      evt.stopPropagation();
      if(!this.dropMenuNode){
        this._createDropMenuNode();
      }
      if(this.state === 'closed'){
        this.openDropMenu();
      }else{
        this.closeDropMenu();
      }
    },

    _createDropMenuNode: function(){
      this.dropMenuNode = html.create('div', {
        'class': 'drop-menu',
        style: {
          display: 'none'
        }
      }, this.domNode);

      if(!this.items){
        this.items = [];
      }

      array.forEach(this.items, function(item){
        var node;
        if(item.key && item.key === 'separator'){
          html.create('hr', {
            'class': 'menu-item-identification menu-item-line',
            'itemId': item.key
          }, this.dropMenuNode);
        }else if(item.key) {
          node = html.create('div', {
            'class': 'menu-item-identification menu-item',
            'itemId': item.key,
            innerHTML: item.label
          }, this.dropMenuNode);

          this.own(on(node, 'click', lang.hitch(this, function(evt){
            this.selectItem(item, evt);
          })));
        }
      }, this);
    },

    _getDropMenuPosition: function(){
      var outBox = html.getContentBox(this.box);
      var thisBox = html.getMarginBox(this.domNode);
      var btnBox = html.getMarginBox(this.btnNode);
      var menuBox = html.getMarginBox(this.dropMenuNode);
      var pos = {}, max, l, t, b, r;
      //display at the bottom by default, if the space is not enough,
      //get the maximum space of the left/top/bottom/right
      pos.l = thisBox.l;
      pos.t = thisBox.t + btnBox.h;
      if(pos.t + menuBox.h > outBox.h){
        t = thisBox.t;
        b = outBox.h - thisBox.t - btnBox.h;
        max = Math.max(t, b);
        if(max === t){
          //put on top of the btn
          pos.t =  0 - menuBox.h;
        }
      }
      if(pos.l + menuBox.w > outBox.w){
        l = thisBox.l;
        r = outBox.w - thisBox.l - btnBox.w;
        max = Math.max(l, r);
        if(max === l){
          pos.l = '';
          pos.r = 0;
        }
      }
      pos.left = pos.l;
      pos.top = pos.t;
      pos.right = pos.r;
      return pos;
    },

    selectItem: function(item){
      this.closeDropMenu();
      this.emit('onMenuClick', item);
    },

    openDropMenu: function(){
      this.state = 'opened';
      html.setStyle(this.dropMenuNode, 'display', '');
      html.setStyle(this.dropMenuNode, utils.getPositionStyle(this._getDropMenuPosition()));
      this.emit('onOpenMenu');
    },

    closeDropMenu: function(){
      this.state = 'closed';
      html.setStyle(this.dropMenuNode, 'display', 'none');
      this.emit('onCloseMenu');
    }

  });
});