///////////////////////////////////////////////////////////////////////////
// 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',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/dom-class',
  'dojo/on',
  'dojo/Evented',
  "dojo/keys"
],
function(declare, _WidgetBase, lang, html, domClass, on, Evented, keys) {

  return declare([_WidgetBase, Evented], {
    'baseClass': 'jimu-checkbox',
    declaredClass: 'jimu.dijit.CheckBox',

    checked: false,
    status: true,
    label: "",

    postCreate: function(){
      this.checkNode = html.create('div', {
        'class': 'checkbox jimu-float-leading jimu-icon jimu-icon-checkbox'
      }, this.domNode);
      this.labelNode = html.create('div', {
        'class': 'label jimu-float-leading',
        innerHTML: this.label || ""
      }, this.domNode);
      if(this.checked){
        html.addClass(this.checkNode, 'checked');
        html.addClass(this.checkNode, 'jimu-icon-checked');
      }
      if(!this.status){
        html.addClass(this.domNode, 'jimu-state-disabled');
        html.addClass(this.checkNode, 'jimu-state-disabled');
      }

      this.own(
        on(this.checkNode, 'click', lang.hitch(this, function(){
          if(this.status){
            if(this.checked){
              this.uncheck();
            }else{
              this.check();
            }
          }
        }))
      );

      this.own(
        on(this.labelNode, 'click', lang.hitch(this, function() {
          if (this.checked && this.status) {
            this.uncheck();
          } else if (this.status) {
            this.check();
          }
        }))
      );
      this._udpateLabelClass();

      this._initSection508();
    },

    setLabel: function(label){
      this.label = label;
      this.labelNode.innerHTML = this.label;
      this.labelNode.title = this.label;
      this._udpateLabelClass();
    },

    _udpateLabelClass: function(){
      if(this.labelNode){
        if(this.labelNode.innerHTML){
          html.removeClass(this.labelNode, 'not-visible');
        }else{
          html.addClass(this.labelNode, 'not-visible');
        }
      }
    },
    _initSection508: function () {
      //with "tabindex" param
      if ("undefined" !== typeof this.tabindex) {
        html.setAttr(this.checkNode, "tabindex", this.tabindex);
        //css class
        this.own(on(this.checkNode, 'focus', lang.hitch(this, function () {
          html.addClass(this.checkNode, "dijitCheckBoxFocused");
        })));
        this.own(on(this.checkNode, 'blur', lang.hitch(this, function () {
          html.removeClass(this.checkNode, "dijitCheckBoxFocused");
        })));
        //keypress event
        this.own(on(this.checkNode, 'keypress', lang.hitch(this, function (evt) {
          var charOrCode = evt.charCode || evt.keyCode;
          if (html.hasClass(this.checkNode, "dijitCheckBoxFocused") && keys.SPACE === charOrCode) {
            if (this.status) {
              if (this.checked) {
                this.uncheck();
              } else {
                this.check();
              }
            }
          }
        })));
      }
    },

    setValue: function(value){
      if(!this.status){
        return;
      }
      if(value === true){
        this.check();
      }else{
        this.uncheck();
      }
    },

    getValue: function(){
      return this.checked;
    },

    setStatus: function(newStatus){
      newStatus = !!newStatus;

      var isStatusChanged = this.status !== newStatus;

      this.status = newStatus;

      if(this.status){
        domClass.remove(this.domNode, 'jimu-state-disabled');
        html.removeClass(this.checkNode, 'jimu-state-disabled');
      }else{
        domClass.add(this.domNode, 'jimu-state-disabled');
        html.addClass(this.checkNode, 'jimu-state-disabled');
      }

      if(isStatusChanged){
        this.emit('status-change', newStatus);
      }
    },

    getStatus: function(){
      return this.status;
    },

    check: function(notEvent){
      if(!this.status){
        return;
      }
      this.checked = true;
      html.addClass(this.checkNode, 'checked jimu-icon-checked');
      html.removeClass(this.checkNode, 'checked jimu-icon-checkbox');
      if(!notEvent){
        this.onStateChange();
      }
    },

    uncheck: function(notEvent){
      if(!this.status){
        return;
      }
      this.checked = false;
      html.removeClass(this.checkNode, 'checked');
      html.removeClass(this.checkNode, 'jimu-icon-checked');
      html.addClass(this.checkNode, 'jimu-icon-checkbox');

      if(!notEvent){
        this.onStateChange();
      }
    },

    onStateChange: function(){
      if(this.onChange && lang.isFunction(this.onChange)){
        this.onChange(this.checked);
      }
      this.emit('change', this.checked);
    },

    focus: function () {
      if (this.checkNode && this.checkNode.focus) {
        this.checkNode.focus();
      }
    }
  });
});