///////////////////////////////////////////////////////////////////////////
// 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',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'jimu/utils'
  ],
  function(declare, lang, html, on, _WidgetBase, _TemplatedMixin, jimuUtils) {
    return declare([_WidgetBase, _TemplatedMixin], {
      baseClass: 'jimu-foldable-dijit',
      width: '100%',
      titleHeight: 20,
      content: null, //content is a dijit
      folded: false,
      templateString: '<div>' +
        '<div class="title" data-dojo-attach-point="titleNode">' +
        '<div class="title-label"' +
        'data-dojo-attach-point="titleLabelNode"></div>' + '</div>' +
        '<div class="jimu-panel-content" data-dojo-attach-point="containerNode"></div>' +
        '</div>',

      startup: function() {
        this.inherited(arguments);

        html.setStyle(this.titleNode, {
          width: this.width,
          height: this.titleHeight + 'px'
        });
        html.setStyle(this.containerNode, {
          top: this.titleHeight + 'px'
        });
        html.setStyle(this.titleLabelNode, {
          lineHeight: this.titleHeight + 'px'
        });
        if (this.label) {
          this.setTitleLabel(this.label);
        }
        this.foldEnable = true;

        this.own(on(this.titleNode, 'click', lang.hitch(this, function(){
          this.onFoldableNodeClick();
        })));
      },

      setTitleLabel: function(label) {
        this.label = label;
        this.titleLabelNode.innerHTML = jimuUtils.stripHTML(label);
        this.titleLabelNode.title = label;
      },

      createFoldableBtn: function() {
        this.foldableNode = html.create('div', {
          'class': 'foldable-btn jimu-float-trailing'
        }, this.titleNode);

        this.own(on(this.foldableNode, 'click', lang.hitch(this, function(evt){
          evt.stopPropagation();
          this.onFoldableNodeClick();
        })));
      },

      onFoldableNodeClick: function(){
        if(!this.foldEnable){
          return;
        }
        if(this.folded){
          this.folded = false;
          html.removeClass(this.foldableNode, 'folded');
        }else{
          this.folded = true;
          html.addClass(this.foldableNode, 'folded');
        }
        this.onFoldStateChanged();
      },

      onFoldStateChanged: function(){}
    });
  });