///////////////////////////////////////////////////////////////////////////
// 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/_base/array',
  'dijit/_WidgetBase'
],

function(declare, lang, html, array, _WidgetBase) {
  return declare(_WidgetBase, {
    // summary:
    //    a dijit which can hold many views but display only one at on time
    // description:
    //    the constructor params is {views: []}, every view should have a property: label.
    //    View can be a dijit or dom
    baseClass: 'jimu-viewstack',
    declaredClass: 'jimu.dijit.ViewStack',
    _currentView: null,

    postCreate: function() {
      this.inherited(arguments);
      if(!this.views){
        this.views = [];
      }
      array.forEach(this.views, lang.hitch(this, function(view){
        if(view.nodeType === 1){
          html.place(view, this.domNode);
          html.addClass(view, 'view');
          html.setStyle(view, 'display', 'none');
        }
        else if(view.domNode){
          html.place(view.domNode, this.domNode);
          html.addClass(view.domNode, 'view');
          html.setStyle(view.domNode, 'display', 'none');
        }
      }));
    },

    startup: function() {
      this.inherited(arguments);
      if(this.views.length > 0){
        this.switchView(0);
      }
    },

    getSelectedView: function(){
      return this._currentView;
    },

    getSelectedLabel: function(){
      var label = '';
      var view = this.getSelectedView();
      if(view){
        label = view.label;
      }
      return label;
    },

    getViewByLabel: function(label){
      for(var i = 0; i < this.views.length; i++){
        if(label === this.views[i].label){
          return this.views[i];
        }
      }
      return null;
    },

    addView: function(view){
      this.views.push(view);
      if(view.nodeType === 1){
        html.place(view, this.domNode);
        html.addClass(view, 'view');
      }
      else if(view.domNode){
        html.place(view.domNode, this.domNode);
        html.addClass(view.domNode, 'view');
      }
    },

    removeView: function(view){
      var c1 = this.views.length;
      this.views = array.filter(this.views, function(v){
        return view !== v;
      });
      var c2 = this.views.length;
      if(c1 !== c2){
        if(view.nodeType === 1){
          html.destroy(view);
        }
        else if(view.domNode){
          view.destroyRecursive();
        }
      }
    },

    switchView: function(v){
      var view, dom;
      if(typeof v === 'number'){
        view = this.views[v];
      }else if(typeof v === 'string'){
        view = this.getViewByLabel(v);
      }else{
        view = v;
      }

      this.views.forEach(lang.hitch(this, function(_v){
        if(!_v){
          return;
        }
        if(_v.nodeType === 1){
          dom = _v;
        }
        else if(_v.domNode){
          dom = _v.domNode;
        }
        if(_v === view){
          html.setStyle(dom, 'display', 'block');
          if(_v.domNode){
            if(!_v._started){
              _v.startup();
              _v._started = true;
            }else if(typeof _v.onShown === 'function'){
              _v.onShown();
            }
          }
        }
        else{
          html.setStyle(dom, 'display', 'none');
          if(_v.domNode && typeof _v.onHidden === 'function'){
            _v.onHidden();
          }
        }
      }));
      this._currentView = view;
      this.onViewSwitch(view);
    },

    onViewSwitch: function(){}
  });
});