///////////////////////////////////////////////////////////////////////////
// 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',
  'dijit/_TemplatedMixin',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/_base/html',
  'dojo/on',
  'dojo/query',
  'dojo/Evented'
],
function(declare, _WidgetBase, _TemplatedMixin, lang, array, html, on, query, Evented) {

  return declare([_WidgetBase, _TemplatedMixin, Evented], {
    'baseClass': 'jimu-dijit-dropdownmenu',
    declaredClass: 'jimu.dijit.DropdownMenu',
    templateString: '<div></div>',
    itemHeight: 24,
    iconSize: 16,
    offsetY: 5,
    shelter: null,
    paddingOffsetY: 8,
    dropdownMenuItemClass: 'dropdown-menu-item',

    //options:
    items: null,//[{value,label}]
    highlightValue: "",
    highlightSelectedItemAfterClick: true,
    menuLeadingIcon: true,
    maxDisplayItems: 10,

    //events:
    //click-item

    postCreate: function(){
      this.inherited(arguments);
      if(!this.items){
        this.items = [];
      }
      this.shelter = html.toDom('<div class="jimu-dijit-dropdownmenu-shelter"></div>');
      this.itemsContainer = html.toDom('<div class="jimu-dijit-dropdownmenu-items-container"></div>');
      if(this.maxDisplayItems <= 0){
        this.maxDisplayItems = 20;
      }
      this.itemsContainer.style.maxHeight = this.itemHeight * this.maxDisplayItems + this.paddingOffsetY * 2 + "px";
      array.forEach(this.items, lang.hitch(this, function(item){
        var str = '<div class="' + this.dropdownMenuItemClass + ' jimu-ellipsis">' + item.label + '</div>';
        var itemDom = html.toDom(str);
        itemDom.itemInfo = item;
        itemDom.title = item.label;
        html.place(itemDom, this.itemsContainer);
      }));
      this.own(on(this.domNode, 'click', lang.hitch(this, this._onIconClick)));
      this.own(on(this.shelter, 'click', lang.hitch(this, this._onShelterClick)));
      this.own(on(this.itemsContainer, 'click', lang.hitch(this, this._onItemsContainerClick)));
      if(this.highlightValue){
        this.setHighlightValue(this.highlightValue);
      }
    },

    _onIconClick: function(evt){
      evt.stopPropagation();
      if(this.isShowing()){
        this.hideMenu();
      }else{
        var position = html.position(evt.target || evt.srcElement);
        this.showMenu(position);
      }
    },

    _onShelterClick: function(){
      this.hideMenu();
    },

    _onItemsContainerClick: function(evt){
      evt.stopPropagation();
      var target = evt.target || evt.srcElement;
      if(html.hasClass(target, this.dropdownMenuItemClass)){
        var value = target.itemInfo.value;
        if(this.highlightSelectedItemAfterClick){
          this.setHighlightValue(value);
        }
        this.emit("click-item", value);
      }
      this.hideMenu();
    },

    clearHighlightValue: function(){
      query("." + this.dropdownMenuItemClass, this.itemsContainer).removeClass("selected");
    },

    setHighlightValue: function(value){
      this.clearHighlightValue();
      query("." + this.dropdownMenuItemClass, this.itemsContainer).some(
        lang.hitch(this, function(itemDom){
        var itemInfo = itemDom.itemInfo;
        if(itemInfo.value === value){
          html.addClass(itemDom, "selected");
          return true;
        }
        return false;
      }));
    },

    getHighlightValue: function(){
      var itemDom = query("." + this.dropdownMenuItemClass + ".selected", this.itemsContainer)[0];
      if(itemDom){
        return itemDom.itemInfo.value;
      }
      return null;
    },

    isShowing: function(){
      return html.hasClass(this.domNode, "showing");
    },

    showMenu: function(position){
      this.itemsContainer.style.top = position.y + this.iconSize + this.offsetY + "px";
      var isNormalPosition = this.menuLeadingIcon === window.isRTL;
      if(isNormalPosition){
        this.itemsContainer.style.left = position.x + "px";
        this.itemsContainer.style.right = "auto";
      }else{
        this.itemsContainer.style.right = window.innerWidth - (position.x + this.iconSize) + "px";
        this.itemsContainer.style.left = "auto";
      }
      html.place(this.shelter, document.body);
      html.place(this.itemsContainer, document.body);
      html.addClass(this.domNode, "showing");
    },

    hideMenu: function(){
      if(this.itemsContainer.parentNode){
        this.itemsContainer.parentNode.removeChild(this.itemsContainer);
      }
      if(this.shelter.parentNode){
        this.shelter.parentNode.removeChild(this.shelter);
      }
      html.removeClass(this.domNode, "showing");
    },

    destroy: function(){
      this.hideMenu();
      html.destroy(this.itemsContainer);
      html.destroy(this.shelter);
      this.inherited(arguments);
    }

  });
});