///////////////////////////////////////////////////////////////////////////
// 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/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/Evented',
    'dojo/Deferred',
    'dijit/popup',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dojo/text!./templates/LayerChooserFromMapWithDropbox.html',
    'jimu/LayerInfos/LayerInfos'
  ],
  function(declare, lang, html, on, Evented, Deferred, dojoPopup, _WidgetBase, _TemplatedMixin, template, LayerInfos) {

    return declare([_WidgetBase, _TemplatedMixin, Evented], {
      templateString: template,
      baseClass: 'jimu-layer-chooser-from-map-withdropbox',
      declaredClass: 'jimu.dijit.LayerChooserFromMapWithDropbox',
      _selectedItem: null,//{layerInfo,name,url}
      _isLayerChooserShow: false,
      layerInfosObj: null,

      //options:
      layerChooser: null,//instance of LayerChooserFromMap

      //public methods:
      //getLayerChooser
      //getSelectedItem
      //showLayerChooser
      //hideLayerChooser

      //events:
      //selection-change

      postCreate: function() {
        this.inherited(arguments);
        this.layerInfosObj = LayerInfos.getInstanceSync();
        this.layerChooser.domNode.style.zIndex = 1;
        this.layerChooser.tree.domNode.style.borderTop = "0";
        this.layerChooser.tree.domNode.style.maxHeight = "290px";
        this.own(on(this.layerChooser, 'tree-click', lang.hitch(this, this._onTreeClick)));
        this.own(on(this.layerChooser, 'update', lang.hitch(this, this._onLayerChooserUpdate)));
        this.own(on(document.body, 'click', lang.hitch(this, this._onBodyClicked)));
      },

      destroy: function(){
        this.hideLayerChooser();
        if(this.layerChooser){
          this.layerChooser.destroy();
        }
        this.layerChooser = null;
        this.inherited(arguments);
      },

      getLayerChooser: function(){
        return this.layerChooser;
      },

      //if resolves true, means we use the layer as the selected layer successfully
      setSelectedLayer: function(layer){
        var def = new Deferred();
        if (layer) {
          var layerInfo = this.layerInfosObj.getLayerInfoById(layer.id);
          if (layerInfo) {
            this.layerChooser.filter(layerInfo).then(lang.hitch(this, function(success){
              if(success){
                var item = {
                  layerInfo: layerInfo,
                  name: layerInfo.title,
                  url: layer.url
                };
                this._onSelectNewItem(item);
                def.resolve(true);
              }else{
                def.resolve(false);
              }
            }), lang.hitch(this, function(){
              def.resolve(false);
            }));
          } else {
            def.resolve(false);
          }
        }else{
          this._onSelectNewItem(null);
          def.resolve(true);
        }

        return def;
      },

      getSelectedItem: function(){
        return this._selectedItem;
      },

      getSelectedItems: function(){
        return [this._selectedItem];
      },

      _onBodyClicked: function(evt){
        var target = evt.target || evt.srcElement;
        if(target === this.domNode || html.isDescendant(target, this.domNode)){
          return;
        }
        if(target === this.layerChooser.domNode || html.isDescendant(target, this.layerChooser.domNode)){
          return;
        }
        this.hideLayerChooser();
      },

      _onDropDownClick: function(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        if(this._isLayerChooserShow){
          this.hideLayerChooser();
        }else{
          this.showLayerChooser();
        }
      },

      _getSelectedItems: function(){
        var items = this.layerChooser.getSelectedItems();
        return items;
      },

      showLayerChooser: function() {
        var width = this.domNode.clientWidth;
        // if (width < 200) {
        //   width = 200;
        // }
        this.layerChooser.domNode.style.minWidth = width + 2 + "px";

        dojoPopup.open({
          parent: this,
          popup: this.layerChooser,
          around: this.domNode
        });

        var popupDom = this.layerChooser.domNode.parentNode;
        if (popupDom) {
          html.addClass(popupDom, 'jimu-layer-chooser-from-map-withdropbox-popup');
        }
        this._isLayerChooserShow = true;
      },

      hideLayerChooser: function() {
        dojoPopup.close(this.layerChooser);
        this._isLayerChooserShow = false;
      },

      _onLayerChooserUpdate: function(){
        if(this._selectedItem && this.layerChooser.onlyShowVisible){
          var layerInfo = this._selectedItem.layerInfo;
          if(!layerInfo.isShowInMap()){
            this._selectedItem = null;
            this.emit('selection-change', []);
          }
        }
      },

      _onSelectNewItem: function(newSelectedItem){
        var oldSelectedItem = this._selectedItem;
        var oldSelectedItemId = lang.getObject("layerInfo.id", false, oldSelectedItem) || -1;
        var newSelectedItemId = lang.getObject("layerInfo.id", false, newSelectedItem) || -1;

        var isChanged = oldSelectedItemId !== newSelectedItemId;
        this._selectedItem = newSelectedItem;
        this.hideLayerChooser();
        var title = lang.getObject("layerInfo.title", false, this._selectedItem) || "";
        this.layerNameNode.innerHTML = title;
        html.setAttr(this.layerNameNode, 'title', title);
        var layer = lang.getObject("layerInfo.layerObject", false, this._selectedItem);

        if(isChanged){
          this.emit('selection-change', [layer]);
        }
      },

      _onTreeClick: function() {
        var selectedItems = this._getSelectedItems();
        var selectedItem = selectedItems.length > 0 ? selectedItems[0] : null;
        this._onSelectNewItem(selectedItem);
      }
    });
  });