/*
// Copyright © 2014 - 2018 Esri. All rights reserved.

TRADE SECRETS: ESRI PROPRIETARY AND CONFIDENTIAL
Unpublished material - all rights reserved under the
Copyright Laws of the United States and applicable international
laws, treaties, and conventions.

For additional information, contact:
Attn: Contracts and Legal Department
Environmental Systems Research Institute, Inc.
380 New York Street
Redlands, California, 92373
USA

email: contracts@esri.com
*/

define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./templates/_ItemTable.html',
  'dojo/Evented',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/_base/html',
  'dojo/_base/Deferred',
  'dojo/query',
  'dojo/on',
  'jimu/utils',
  'jimu/portalUtils',
  'jimu/portalUrlUtils',
  'jimu/dijit/LoadingIndicator'
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template, Evented,
  lang, array, html, Deferred, query, on, jimuUtils, portalUtils, portalUrlUtils, LoadingIndicator){
  /*jshint unused: false*/
  return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Evented], {
    templateString: template,
    declaredClass: "jimu.dijit.ItemTable",
    baseClass: "jimu-item-table",
    query: null,
    filteredQuery: null,
    portalUrl: null,
    hidden: false,
    nls: null,
    types: '',//required,array, filter search results,such as ["Feature Service","Map Service"]
    typeKeywords: '',//optional, array, filter search results,such as ["Web AppBuilder","Web Map"]

    //public methods:
    //getSelectedItem
    //show
    //hide
    //searchAllItems
    //searchFilteredItems
    //clear
    //clearAllItemsSection
    //clearFilteredItemsSection
    //showAllItemsSection
    //showFilterItemsSection

    //callback methods
    //onCreateItemContent(item, itemInfoDom)

    //css classes:
    //item
    //item-border
    //item-thumbnail
    //item-info
    //item-name
    //item-type-owner
    //item-date
    //item-details
    //search-none-icon
    //search-none-tip

    _defaultThumbnail:{
      "Web Mapping Application": "desktopapp.png",
      "Mobile Application": "mobileapp.png"
    },

    postMixInProperties:function(){
      this.nls = window.jimuNls.itemSelector;
    },

    postCreate: function() {
      this.inherited(arguments);
      this._initSelf();
    },

    _initSelf: function(){
      if(!(this.types && this.types.length > 0)){
        this.types = [];
      }

      this.hidden = this.hidden === true;
      if(this.hidden){
        this.hide();
      }
      if(this.portalUrl){
        this.portalUrl = portalUrlUtils.getStandardPortalUrl(this.portalUrl);
      }

      this.showAllItemsSection();
      this.searchAllItems();
    },

    show:function(){
      html.setStyle(this.domNode, 'display', 'block');
    },

    hide:function(){
      html.setStyle(this.domNode, 'display', 'none');
    },

    searchAllItems:function(newQuery){
      this.showAllItemsSection();
      if(newQuery){
        this.query = lang.mixin({}, newQuery);
        this.query.start = 1;
        this.clearAllItemsSection();
      }
      if(!this.portalUrl || !this.query){
        return;
      }
      if(this.query.start > 0){
        this.allItemsShelter.show();
        var portal = portalUtils.getPortal(this.portalUrl);
        var def = portal.queryItems(this.query);

        def.then(lang.hitch(this, function(response) {
          if(!this.domNode){
            return;
          }
          this.allItemsShelter.hide();
          this.query.start = response.nextStart;
          this._createItems(response, this.allItemTbody);
        }), lang.hitch(this, function(err) {
          console.error(err);
          if(!this.domNode){
            return;
          }
          this.allItemsShelter.hide();
        }));
      }
    },

    searchFilteredItems:function(/*optional*/ newFilteredQuery){
      //if newFilteredQuery is not null or undefined, it means the dijit will search a new query
      //otherwise it means this method is called when scroll to bottom of this.filteredItemsTableDiv
      this.showFilterItemsSection();

      if(newFilteredQuery){
        this.filteredQuery = lang.clone(newFilteredQuery);
        this.filteredQuery.start = 1;
        this.clearFilteredItemsSection();
      }

      if(!this.portalUrl || !this.filteredQuery){
        return;
      }

      if(this.filteredQuery.start > 0){
        this.filteredItemShelter.show();
        var portal = portalUtils.getPortal(this.portalUrl);
        var def = portal.queryItems(this.filteredQuery);

        def.then(lang.hitch(this, function(response){
          if(!this.domNode){
            return;
          }
          this.showFilterItemsSection();
          if(newFilteredQuery){
            this.clearFilteredItemsSection();
          }
          this.filteredQuery.start = response.nextStart;
          this._createItems(response, this.filteredItemsTbody);
          this._filterItemCallback();
        }), lang.hitch(this, function(err){
          console.error(err);
          if(!this.domNode){
            return;
          }
          this._filterItemCallback();
        }));
      }
    },

    _filterItemCallback: function(){
      this.filteredItemShelter.hide();
      var count = this._getItemCount(this.filteredItemsTbody);
      if(count > 0){
        html.setStyle(this.filteredItemsTableDiv, 'display', 'block');
        html.setStyle(this.searchNoneTipSection, 'display', 'none');
      }else{
        html.setStyle(this.filteredItemsTableDiv, 'display', 'none');
        html.setStyle(this.searchNoneTipSection, 'display', 'block');
      }
    },

    clear:function(){
      this.clearAllItemsSection();
      this.clearFilteredItemsSection();
    },

    clearAllItemsSection:function(){
      html.empty(this.allItemTbody);
    },

    clearFilteredItemsSection:function(){
      html.empty(this.filteredItemsTbody);
    },

    showAllItemsSection:function(){
      html.setStyle(this.allItemsSection, 'display', 'block');
      html.setStyle(this.filteredItemsSection, 'display', 'none');
    },

    showFilterItemsSection:function(){
      html.setStyle(this.allItemsSection, 'display', 'none');
      html.setStyle(this.filteredItemsSection, 'display', 'block');
      html.setStyle(this.filteredItemsTableDiv, 'display', 'block');
      html.setStyle(this.searchNoneTipSection, 'display', 'none');
    },

    _onAllItemsSectionScroll:function(){
      if(this._isScrollToBottom(this.allItemsTableDiv)){
        this.searchAllItems();
      }
    },

    _onFilteredItemsSectionScroll:function(){
      if(this._isScrollToBottom(this.filteredItemsTableDiv)){
        this.searchFilteredItems();
      }
    },

    _isScrollToBottom:function(div){
      return jimuUtils.isScrollToBottom(div);
    },

    _createItems: function(response, tbody) {
      var results = response.results;
      var typesLowerCase = array.map(this.types, lang.hitch(this, function(type){
        return type.toLowerCase();
      }));
      var items = array.filter(results, lang.hitch(this, function(item) {
        var type = (item.type && item.type.toLowerCase()) || '';
        return array.indexOf(typesLowerCase, type) >= 0;
      }));
      var countPerRow = 2;
      if (items.length === 0) {
        return;
      }
      var itemsHash = {}, itemDiv;
      var emptyTds = query('td.empty', tbody);
      var i;
      if(emptyTds.length > 0){
        var usedEmptyTdCount = Math.min(items.length, emptyTds.length);
        var ws = items.splice(0, usedEmptyTdCount);
        for(i = 0; i < usedEmptyTdCount; i++){
          var emptyTd = emptyTds[i];
          itemDiv = this._createItem(ws[i]);
          itemsHash[itemDiv.item.id] = itemDiv;
          html.place(itemDiv, emptyTd);
          html.removeClass(emptyTd, 'empty');
        }
      }

      if(items.length === 0){
        return;
      }

      var trCount = Math.ceil(items.length / countPerRow);
      for (i = 0; i < trCount; i++) {
        var trStr = "<tr><td></td><td></td></tr>";
        var trDom = html.toDom(trStr);
        html.place(trDom, tbody);
        var tds = query('td', trDom);
        for (var j = 0; j < tds.length; j++) {
          var td = tds[j];
          var item = items[countPerRow * i + j];
          if(item){
            itemDiv = this._createItem(item);
            itemsHash[itemDiv.item.id] = itemDiv;
            html.place(itemDiv, td);
          }
          else{
            html.addClass(td, 'empty');
          }
        }
      }
      this.emit("update");
    },

    _getItemCount:function(tbody){
      return query('.item', tbody).length;
    },

    _createItem: function(item){
      var str = '<div class="item">' +
        '<div class="item-border"></div>' +
        '<div class="item-thumbnail jimu-auto-vertical">' +
          '<div class="none-thumbnail-tip jimu-auto-vertical-content"></div>' +
        '</div>' +
        '<div class="item-info">' +
          '<div class="item-name"></div>' +
          '<div class="item-type-owner"></div>' +
          '<div class="item-date"></div>' +
          '<a class="item-details" target="_blank"></a>' +
        '</div>' +
      '</div>';
      var itemDiv = html.toDom(str);
      itemDiv.item = item;
      var itemThumbnail = query('.item-thumbnail', itemDiv)[0];
      var itemName = query('.item-name', itemDiv)[0];
      var itemTypeOwner = query('.item-type-owner', itemDiv)[0];
      var itemDate = query('.item-date', itemDiv)[0];
      var itemDetails = query('.item-details', itemDiv)[0];
      var noneThumbnailTip = query('.none-thumbnail-tip', itemDiv)[0];
      if(!item.thumbnailUrl){
        var defaultThumbnail = this._defaultThumbnail[item.type];
        if(defaultThumbnail){
          item.thumbnailUrl = require.toUrl('jimu') + '/images/' + defaultThumbnail;
        }
      }
      if(item.thumbnailUrl){
        html.setStyle(itemThumbnail, 'backgroundImage', "url(" + item.thumbnailUrl + ")");
      }
      else{
        noneThumbnailTip.innerHTML = this.nls.noneThumbnail;
      }

      if(typeof this.onCreateItemContent === 'function'){
        var itemInfoDom = query('.item-info', itemDiv)[0];
        this.onCreateItemContent(item, itemInfoDom);
      }else{
        itemName.innerHTML = item.title;
        itemName.title = itemName.innerHTML;
        itemTypeOwner.innerHTML = item.type + ' by ' + item.owner;
        itemTypeOwner.title = itemTypeOwner.innerHTML;
        var d = new Date();
        d.setTime(item.modified);
        itemDate.innerHTML = d.toLocaleString();
        itemDate.title = itemDate.innerHTML;
        itemDetails.innerHTML = this.nls.moreDetails;
        itemDetails.href = item.detailsPageUrl || "#";
      }

      return itemDiv;
    },

    _onItemsTableClicked: function(event){
      var target = event.target || event.srcElement;
      var itemDiv = null;
      if(html.hasClass(target, 'item-thumbnail')){
        itemDiv = target.parentNode;
      }
      else if(html.hasClass(target, 'none-thumbnail-tip')){
        itemDiv = target.parentNode.parentNode;
      }

      if(!itemDiv){
        return;
      }

      var isSelected = html.hasClass(itemDiv, 'jimu-state-active');
      query('.item.jimu-state-active', this.domNode).removeClass('jimu-state-active');
      if (isSelected) {
        html.removeClass(itemDiv, 'jimu-state-active');
      } else {
        html.addClass(itemDiv, 'jimu-state-active');
      }
      this.emit('item-dom-clicked', itemDiv);
    },

    getSelectedItem: function(){
      var item = null;
      var itemDivs = query('.item.jimu-state-active', this.domNode);
      if(itemDivs.length > 0){
        var itemDiv = itemDivs[0];
        item = lang.mixin({}, itemDiv.item);
      }
      return item;
    }
  });
});