///////////////////////////////////////////////////////////////////////////
// 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/lang',
    'dojo/Deferred',
    'dojo/_base/html',
    'dojo/_base/array',
    'dojo/_base/declare',
    'dojo/Evented',
    // 'dojo/on',
    'dojo/query',
    './ValueProvider',
    './EditTable',
    './AdvancedListValueSelect',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dojo/text!./PredefinedValuePopup.html',
    'dojo/store/Memory',
    'jimu/utils',
    'jimu/dijit/Popup',
    'jimu/dijit/_filter/pageControlForQuery',
    'dojox/form/CheckedMultiSelect'
  ],
    function(lang, Deferred, html, array, declare, Evented, query, ValueProvider,
      EditTable, AdvancedListValueSelect, _TemplatedMixin,
      _WidgetsInTemplateMixin,template, Memory, jimuUtils, Popup, pageControlForQuery, CheckedMultiSelect) {

    return declare([ValueProvider, _TemplatedMixin, _WidgetsInTemplateMixin, Evented], {
        templateString: template,
        codedValues: null,//[{value,label}] for coded values and sub types
        staticValues: null,//[{value,label}]
        showNullValues: false,//show null values
        cbxPopup: null,

        pageSize: 1000, //page size
        pageIndex:1,  //current page

        //optional
        selectUI: null, //dropdown, expanded

        postMixInProperties:function(){
          this.inherited(arguments);
          this.CommonNls = window.jimuNls.common;
          this.Nls = window.jimuNls.filterBuilder;
          this.emptyStr = window.apiNls.widgets.FeatureTable.empty;
        },

        postCreate: function(){
          this.inherited(arguments);
          this.selectUI = this.selectUI ? this.selectUI : 'dropdown';
          html.addClass(this.domNode, 'jimu-filter-mutcheck-list-value-provider');
          // this.layerName.innerText = this.layerDefinition.name;

          this.controlType = 'unique';  //unique, multiple
          if(this.providerType === 'MULTIPLE_PREDEFINED_VALUE_PROVIDER'){
            this.controlType = 'multiple';
          }
          this.isNumberField = jimuUtils.isNumberField(this.fieldInfo.type);
          if(!this.editTable){
            this.editTable = new EditTable({
              tableType: this.controlType,
              dataList: [],
              codedValues: this.codedValues,
              emptyStr: this.emptyStr,
              customValue: this.Nls.addValuePlaceHolder,
              customLabel: this.Nls.addLabelPlaceHolder,
              isNumberField: this.isNumberField
            });
            this.editTable.placeAt(this.tableContent);
            this.editTable.on("editTable_openListSelectByName", lang.hitch(this, this._showListSelectByTable));
            this.editTable.on("editTable_itemChanged", lang.hitch(this, this._editTableItemChanged));
            this.editTable.on("editTable_getValLabelsArrayForNumber",
              lang.hitch(this, this._getValLabelsArrayForNumber));
          }

          this.supportPaing = true;

          if(!this.pageControlForQuery){
            this.pageControlForQuery = new pageControlForQuery({
              pageSize: this.pageSize,
              pageIndex: 1,
              layerUrl: this.url,
              // layerInfo: this.layerInfo,
              fieldInfo: this.fieldInfo,
              queryWhere: '1=1',
              layerDefinition: this.layerDefinition,
              fieldPopupInfo: this.fieldPopupInfo,
              // spatialReference: this.layerInfo.map.spatialReference,
              isNumberField: this.isNumberField
            });
          }

          if(!this.listSelect){
            // this._initAdvancedListValueSelect();
            this.listSelect = new AdvancedListValueSelect({
              emptyStr: this.emptyStr,
              runtime: this.runtime,
              pageSize: this.pageSize,
              // selectType: 'multiple',// when it's in header
              selectType: 'unique',//when it's for single item
              controlType: 'predefined',
              dataList:[],
              selectedDataList:[],
              isNumberField: this.isNumberField
            });
            // this.listSelect.placeAt(this.listSelectStore);
            // this.own(topic.subscribe("AdvancedListValueSelect/itemChecked", lang.hitch(this, this._createTarget)));

            this.listSelect.on("advancedListValueSelect_itemChecked", lang.hitch(this, this._createTarget));
            this.listSelect.on("advancedListValueSelect_itemUnChecked", lang.hitch(this, this._destoryTarget));
            this.listSelect.on("advancedListValueSelect_addNextPage", lang.hitch(this, this._addNextPage));
            this.listSelect.on("advancedListValueSelect_searchKey", lang.hitch(this, this._searchKey));
            this.listSelect.on("advancedListValueSelect_searchKeyLocal", lang.hitch(this, this._searchKeyLocal));

            this.listSelect.on("advancedListValueSelect_itemCheckedForPredefined",
              lang.hitch(this, this._createTargetForPredefined));
          }

          if(!this.mutiValuesSelect){
            this.mutiValuesSelect = new CheckedMultiSelect({
              multiple: true,
              required: false,
              intermediateChanges: true, //Fires onChange for each value change or only on demand
              style: {'width':'100%'}
            });
          }

          //event
          this._multipleSelectProviderEventHandler = lang.hitch(this, this._multipleSelectProviderEvent);
          document.addEventListener('click', this._multipleSelectProviderEventHandler);
          /*
          this.own(on(document, 'click', lang.hitch(this, function(evt){
            var target = event.target || event.srcElement;
            if((this.editTable && target !== this.editTable.searchTarget) &&
              (this.cbxPopup && this.cbxPopup.domNode && !html.isDescendant(target, this.cbxPopup.domNode))){
              this._createTargetForPredefined();
              evt.stopPropagation();
              return;
            }
            if(this.editTable && target === this.editTable.searchTarget &&
              (this.cbxPopup && this.cbxPopup.domNode)){ //click search
              if(html.getStyle(this.cbxPopup.domNode, 'display') === 'block'){
                html.setStyle(this.cbxPopup.domNode, 'display', 'none');
              }else{
                html.setStyle(this.cbxPopup.domNode, 'display', 'block');
              }
              return;
            }

            var isIn = this._isInSelectPopup(target);
            if(isIn || this.runtime){ //always displaying on runtime page
              evt.stopPropagation();
              return;
            }else{
              html.setStyle(this.valuesPopupNode, 'display', 'none');
            }
          })));
          */
          // this.own(on(this.valuesPopupNode, 'click', lang.hitch(this, function(evt){
          //   evt.stopPropagation();
          // })));

          //[{id,value,label}]
          var store = new Memory({idProperty:'id', data: []});
          this.listSelect.set('store', store);
        },

        _multipleSelectProviderEvent: function(event){
          var target = event.target || event.srcElement;
          var isSearchBtn = html.isDescendant(target, this.editTable.searchBtn);
          if(this.editTable && this.cbxPopup && this.cbxPopup.domNode){
            if(isSearchBtn){ //click search btn
              if(html.getStyle(this.cbxPopup.domNode, 'display') === 'block'){
                html.setStyle(this.cbxPopup.domNode, 'display', 'none');
              }else{
                html.setStyle(this.cbxPopup.domNode, 'display', 'block');
              }
            }else if(!html.isDescendant(target, this.cbxPopup.domNode)){ //other space
              this._createTargetForPredefined();
            }
            event.stopPropagation();
            return;
          }

          var isIn = this._isInSelectPopup(target);
          if(isIn || this.runtime){ //always displaying on runtime page
            event.stopPropagation();
            return;
          }else{
            html.setStyle(this.valuesPopupNode, 'display', 'none');
          }
        },

        _initAdvancedListValueSelect: function(){
          this.pageControlForQuery.pageIndex = 1;
          this.pageControlForQuery.isKeyQueryLoader = false;

          this.listSelect = new AdvancedListValueSelect({
            emptyStr: this.emptyStr,
            runtime: this.runtime,
            pageSize: this.pageSize,
            isCacheFinish: this.pageControlForQuery._isUniqueValueCacheFinish,
            // selectType: 'multiple',// when it's in header
            selectType: 'unique',//when it's for single item
            controlType: 'predefined',
            dataList:[],
            selectedDataList:[],
            isNumberField: this.isNumberField
          });
          // this.listSelect.placeAt(this.listSelectStore);
          // this.own(topic.subscribe("AdvancedListValueSelect/itemChecked", lang.hitch(this, this._createTarget)));

          this.listSelect.on("advancedListValueSelect_itemChecked", lang.hitch(this, this._createTarget));
          this.listSelect.on("advancedListValueSelect_itemUnChecked", lang.hitch(this, this._destoryTarget));
          this.listSelect.on("advancedListValueSelect_addNextPage", lang.hitch(this, this._addNextPage));
          this.listSelect.on("advancedListValueSelect_searchKey", lang.hitch(this, this._searchKey));
          this.listSelect.on("advancedListValueSelect_searchKeyLocal", lang.hitch(this, this._searchKeyLocal));

          this.listSelect.on("advancedListValueSelect_itemCheckedForPredefined",
            lang.hitch(this, this._createTargetForPredefined));
        },

        _isInSelectPopup:function(target){
          var classList = ['dijitCheckBoxInput', 'dojoxMultiSelectItemLabel', 'dojoxMultiSelectItemBox',
            'dojoxMultiSelectItem', 'dojoxCheckedMultiSelectWrapper', 'dojoxCheckedMultiSelect',
            'value-type-popup', 'popupOper', 'pageItem'];
          var isIn = false;
          for(var key = 0;key <= classList.length; key ++ ){
            if(html.hasClass(target, classList[key])){
              isIn = true;
              break;
            }
          }
          return isIn;
        },

        //for list select popup
        // _createTarget: function(name){
        //   this.editTable._createTarget(name);
        // },

        //for editTable
        _createTarget: function(){
          this.editTable._createTarget('', '', '', '', true);
          this._editTableItemChanged();
        },

        _createTargetForPredefined: function(value, name){
          this.editTable._setNewLabel(value, name);
          this.cbxPopup.close();
          this._editTableItemChanged();
        },

        _destoryTarget:function(name){
          this.editTable._destroyTarget(name);
          this._editTableItemChanged();
        },

        _editTableItemChanged: function(){
          if(!this.runtime){
            var valueObj = this.getValueObject();
            this._setApplyState(valueObj.value.length);
          }
        },

        _setApplyState: function(state){
          this.emit("predefinedValuePopup_setApplyBtnState", state);
        },

        _cbxWidth: 245,
        _cbxHeight: 340,
        isPopupLoading: false,
        _showListSelectByTable: function(name){
          if(this.isPopupLoading){
            return;
          }
          this._initAdvancedListValueSelect();//init select & pagecontrol
          this.valueList = [name];
          this.getCheckedList(this.valueList);

          var rPosition = html.position(this.editTable.searchBtn);
          var popupPosition = {
            left: rPosition.x - 226,
            top: rPosition.y + 30
          };
          if(window.isRTL){
            popupPosition.left = rPosition.x;
          }

          this.cbxPopup = new Popup({
            width: this._cbxWidth,
            height: this._cbxHeight,
            content: this.listSelect.domNode,
            enableMoveable: false,
            hasTitle: false,
            hasOverlay: false,
            contentHasNoMargin: true,
            moveToCenter: false,
            customPosition: {left: popupPosition.left, top: popupPosition.top},
            buttons: []
          });
          //update popup UI for this dijit
          this.cbxPopup.setDomNodeStyls({'border-radius': 0, 'border': '1px solid #999'});
          this.cbxPopup.on("popupHasInitedSuccessfully", lang.hitch(this, function(){
            var rPosition = html.position(this.editTable.searchBtn);
            var popupPosition = {
              left: rPosition.x - 226,
              top: rPosition.y + 30
            };
            if(window.isRTL){
              popupPosition.left = rPosition.x;
            }
            this.cbxPopup.setCustomPosition(popupPosition.left, popupPosition.top);
          }));
          if(this.listSelect.valueInput){
            this.listSelect.valueInput.focus();
          }

          this._showLoadingIcon();
          this.isPopupLoading = true;
          this._valueLabels().then(lang.hitch(this, function(valueLabels) {
            this.isPopupLoading = false;
            this._hideLoadingIcon();
            if(valueLabels === true){
            }else{
              var ifCheck = false;
              if(this.valueList && this.valueList.length !== 0){
                ifCheck = true;
              }
              this.listSelect.setCBXData(valueLabels,ifCheck);
            }
          }));
        },

        _valueLabels: function(){
          var def = new Deferred();
          this.listSelect.codedValues = false;
          this.listSelect.disPlayLabel = 'label';
          if(this.staticValues){
            this._setValueForStaticValues(this.staticValues);
            def.resolve(true);
            return def;
          } else if(this.codedValues){
            if(this.filterCodedValue){
              this.listSelect.codedValues = true;
            }else{
              this._setValueForStaticValues(this.codedValues);
              def.resolve(true);
              return def;
            }
          }
          this.pageControlForQuery.queryByPage(true).then(lang.hitch(this, function(valueLabels){ //for multiple
            def.resolve(valueLabels);
          }), lang.hitch(this, function(err){
            console.log(err);
            this._hideLoadingIcon();
            def.reject(err);
          }));
          return def;
        },

        _setValueForStaticValues: function(valueLabels){
          this.listSelect.codedValues = true;
          if(valueLabels){
            this.pageControlForQuery._codedvalueCache = valueLabels;
            valueLabels = valueLabels.length > 0 ? valueLabels : [];
            // this.listSelect.disPlayLabel = 'label';
            this.listSelect.setCBXData(valueLabels, true, true);
          }
        },

        //types: dropdown, expanded
        _changeDisplayType: function(evt){
          var target = evt.target || evt.srcElement;
          var option;
          if(html.hasClass(target, 'option')){
            option = target;
          }else{
            option = jimuUtils.getAncestorDom(target, function(dom){
              return html.hasClass(dom, 'option');
            }, 2);
          }
          if(!html.hasClass(option, 'checked')){
            html.addClass(option, 'checked');
            var otherOption = query('.' + this.selectUI + 'Option ', this.displayTypes)[0];
            html.removeClass(otherOption, 'checked');
            // this.selectUI = html.hasClass(option, 'dropdownOption') ? 'dropdown' : 'expanded';
            this.selectUI = this.selectUI === 'expanded' ? 'dropdown' : 'expanded';
          }
        },

        _setDisplayTypeStyle: function(){
          var titleDom = query('.title', this.displayTypes)[0];
          var labelDoms = query('.label', this.displayTypes);
          var w = (html.getStyle(this.displayTypes, 'width') - html.getStyle(titleDom, 'width') - 2 * 40) / 2;
          var leftLabelW = html.getStyle(labelDoms[0], 'width');
          leftLabelW = leftLabelW < w ? leftLabelW : w;
          var rightLabelW = html.getStyle(labelDoms[1], 'width');
          rightLabelW = rightLabelW < w ? rightLabelW : w;
          html.setStyle(labelDoms[0], 'width', leftLabelW + 'px');
          html.setStyle(labelDoms[1], 'width', rightLabelW + 'px');
        },

        _addNextPage: function(){
          if(!this.listSelect){
            return;
          }
          this._showLoadingIcon();
          var def = this.pageControlForQuery.queryByPage(this.listSelect.ifFristPage);
          def.then(lang.hitch(this, function(valueLabels){
            this.listSelect.isCacheFinish = this.pageControlForQuery._isUniqueValueCacheFinish;
            this.listSelect.setCBXData(valueLabels, true);
            this._hideLoadingIcon();
          }), lang.hitch(this, function(err){
            console.log(err);
            this._hideLoadingIcon();
          }));
        },

        //this.allFeatures = [];
        _searchKey: function(name){
          if(!this.listSelect){
            return;
          }
          this._showLoadingIcon();
          this.pageControlForQuery._searchKey(name).then(lang.hitch(this, function(result) {
            this.listSelect.setCBXContentBySearch(result);
            this._hideLoadingIcon();
          }), lang.hitch(this, function(err){
            console.log(err);
            this._hideLoadingIcon();
          }));
        },

        _searchKeyLocal: function(name){
          if(!this.listSelect){
            return;
          }
          this._showLoadingIcon();
          var result = this.pageControlForQuery._searchKeyLocal(name);
          this.listSelect.setCBXContentBySearch(result);
          this._hideLoadingIcon();
        },

        _handlerPageValues: function(){

        },

        getCheckedList: function(valueList){
          this.listSelect.checkedList = [];
          if(this.isNumberField){
            array.forEach(valueList, lang.hitch(this, function(item) {
              this.listSelect.checkedList.push(parseFloat(item));
            }));
          }else{
            this.listSelect.checkedList = valueList;
          }
        },

        _showPopup:function(){
          // this._showLoadingIcon();
          //refresh values
          var valueList = this.getValueObject().valueList;
          this.valueList = valueList === null ? undefined : valueList;
          // this.listSelect.checkedList = this.valueList;
          // if(this.listSelect.vallueInput === undefined){
          //   this.cbxPopup = null;
          // }
          this.getCheckedList(this.valueList);
          if(this.cbxPopup){
            // this.getCheckedList(this.valueList);
            this.listSelect.checkCBXItems(false);
            // this.listSelect.setCBXData(valueLabels,true);
            this.cbxPopup.show();
            // this._hideLoadingIcon();
            return;
          }
          var popupName = this.layerDefinition.name + '(' + this.fieldName + ')';
          this.cbxPopup = new Popup({
            width: 355,
            height: 596,
            content: this.listSelect.domNode, //need a dom, not html string
            titleLabel: popupName,
            isResize: false,
            // onClose: function(){return false},
            onClose: lang.hitch(this, function () {
              //save dom
              // this.cbxPopup.content = null;
              // html.place(this.listSelect.domNode, this.listSelectStore);
              //continue
              this.cbxPopup.hide();
              return false;
            }),
            buttons: []
          });

          this._showLoadingIcon();
          this.pageControlForQuery.queryByPage().then(lang.hitch(this, function(valueLabels) {
            this._hideLoadingIcon();

            var ifCheck = false;
            if(this.valueList && this.valueList.length !== 0){
              ifCheck = true;
            }
            // var cbxData = this.listSelect.setCBXData(valueLabels,ifCheck);
            this.listSelect.setCBXData(valueLabels,ifCheck);
          }));
        },

        getDijits: function(){
          return [this.mutiValuesSelect];
        },

        setValueObject: function(valueObj){//, isFromConfig
          valueObj.value = valueObj.value? valueObj.value: [];

          var selectUI = valueObj.selectUI ? valueObj.selectUI : this.selectUI;
          var typeOption = query('.' + selectUI + 'Option ', this.displayTypes)[0];
          html.addClass(typeOption, 'checked');

          var newValueLabels = null;//get values' format datas on the first colum in table
          if(this.isNumberField){
            var valsArray = [];
            for(var key = 0; key < valueObj.value.length; key ++){
              valsArray.push(valueObj.value[key].value);
            }
            newValueLabels = this._getValLabelsArrayForNumber(false, valsArray);
          }
          this.editTable.emptyLabel = valueObj.emptyLabel;
          this.editTable.enableEmpty = valueObj.enableEmpty;
          this.editTable.setListValues(valueObj.value, newValueLabels);
        },

        _getValLabelsArrayForNumber: function(isTrigger, valsArray){
          var valueLabels = jimuUtils._getValues(this.layerDefinition, this.fieldPopupInfo, this.fieldName, valsArray);
          if(isTrigger){
            this.editTable.currentValLabel = valueLabels[0].label;
          }
          return valueLabels;
        },

        tryGetValueObject: function(){
          if(this.isValidValue()){
            return this.getValueObject();
          }else if(this.isEmptyValue()){
            return {
              "isValid": true,
              "selectUI": this.selectUI,
              "type": this.partObj.valueObj.type,
              "value": [],
              "valueList": []
            };
          }
          return null;
        },

        getValueObject: function(){
          if(this.isValidValue()){
            var valsObj = this.editTable.getListValues();
            var result = {
              "isValid": true,
              "selectUI": this.selectUI,
              "type": this.partObj.valueObj.type,
              "value": valsObj.list, //valueObj list
              "valueList": valsObj.valueList //value list
            };
            if(this.controlType === 'unique'){
              result.emptyLabel = valsObj.emptyLabel;
              result.enableEmpty = valsObj.enableEmpty;
            }
            return result;
          }
          return null;
        },

        setRequired: function(required){
          this.mutiValuesSelect.set("required", required);
        },

        queryByPage: function(){
          var def = this.pageControlForQuery.queryByPage(this.listSelect.ifFristPage);
          def.then(lang.hitch(this, function(features){
            def.resolve(features);
          }), lang.hitch(this, function(err){
            console.log(err);
            def.reject(err);
          }));
        },

        _showLoadingIcon: function(){
          if(this.listSelect && this.listSelect.listContainer){
            html.addClass(this.listSelect.listContainer, 'jimu-circle-loading');
          }
        },

        _hideLoadingIcon: function(){
          if(this.listSelect && this.listSelect.listContainer){
            html.removeClass(this.listSelect.listContainer, 'jimu-circle-loading');
          }
        },

        destroy: function() {
          if(this._multipleSelectProviderEventHandler){
            document.removeEventListener('click', this._multipleSelectProviderEventHandler);
          }
          this.inherited(arguments);
        },

        destroyProvider:function(){
          if(this.editTable){
            this.editTable.destroy();
          }
          // this.editTable = null;
          if(this.listSelect){
            this.listSelect.destroy();
          }
          this.listSelect = null;

          this.destroy();
          html.destroy(this.domNode);

          // this.inherited(arguments);
        }
      });
  });