///////////////////////////////////////////////////////////////////////////
// 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/array',
  'dojo/_base/html',
  'dojo/on',
  'dojo/Evented',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  './ViewStack',
  '../utils'
],
function(declare, lang, array, html, on, Evented, _WidgetBase, _TemplatedMixin,
  ViewStack, utils){
  return declare([_WidgetBase, _TemplatedMixin, Evented], {
    // summary:
    //    a tab dijit
    // description:
    //    constructor options:
    /*======
      {
        tabs: [{
          title: String
          content: DomNode|dijit
        }],
        selected: String
        // summary:
        //    the default selected tab title
      }
    =====*/

    'baseClass': 'jimu-tab',
    declaredClass: 'jimu.dijit.TabContainer',

    templateString: '<div>' +
      '<div class="control" data-dojo-attach-point="controlNode"></div>' +
      '<div class="jimu-container" data-dojo-attach-point="containerNode"></div>' +
      '</div>',

    postCreate: function(){
      this.inherited(arguments);
      if(this.tabs.length === 0){
        return;
      }
      this.controlNodes = [];
      this.viewStack = new ViewStack(null, this.containerNode);
      var width = 1 / this.tabs.length * 100;
      if(this.isNested){
        html.addClass(this.domNode, 'nested');
      }
      array.forEach(this.tabs, function(tabConfig){
        this._createTab(tabConfig, width);
      }, this);
    },

    startup: function() {
      // this.inherited(arguments);
      if(this.selected){
        this.selectTab(this.selected);
      }else if(this.tabs.length > 0){
        this.selectTab(this.tabs[0].title);
      }
      utils.setVerticalCenter(this.domNode);
    },

    _createTab: function(tabConfig, width){
      var ctrlNode;
      ctrlNode = html.create('div', {
        innerHTML: tabConfig.title,
        'class': 'tab jimu-vcenter-text',
        style: {
          width: this.isNested? 'auto': width + '%'
        },
        label: tabConfig.title
      }, this.controlNode);
      if(tabConfig.content.domNode){
        this.viewStack.viewType = 'dijit';
      }else{
        this.viewStack.viewType = 'dom';
      }
      tabConfig.content.label = tabConfig.title;
      this.viewStack.addView(tabConfig.content);
      this.own(on(ctrlNode, 'click', lang.hitch(this, this.onSelect, tabConfig.title)));
      ctrlNode.label = tabConfig.title;
      this.controlNodes.push(ctrlNode);
    },

    onSelect: function(title){
      this.selectTab(title);
    },

    selectTab: function(title){
      this._selectControl(title);
      this.viewStack.switchView(title);
      this.emit('tabChanged', title);
    },

    _selectControl: function(title){
      array.forEach(this.controlNodes, function(ctrlNode) {
        html.removeClass(ctrlNode, 'jimu-state-selected');
        if(ctrlNode.label === title){
          html.addClass(ctrlNode, 'jimu-state-selected');
        }
      });
    }

  });
});