///////////////////////////////////////////////////////////////////////////
// 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',
  'dijit/_WidgetBase'
],
function (declare, lang, html, _WidgetBase) {

  return declare([_WidgetBase], {
    baseClass: 'jimu-tile-container',
    declaredClass: 'jimu.dijit.TileLayoutContainer',

    /**
    * Layout the items depends the strategy: fixWidth, breakWidth, fixCols
    * fixWidth:
    *    the item width/height is px, if the container is not width enough, the item will
    *    flow to the next line.
    * breakWidth:
    *    the item width/height is an array, like this:
    *       [{screenWidth: 600, width: 100, height: 200}],
    *    the order is by screen width
    * fixCols:
    *    set the max cols, and the container will resize the item's width to fit the container.
    *
    * options:
    *   stragety: fixWidth, breakWidth, fixCols
    *   itemSize: [] or {}
    *       each object is:
    *           screenWidth: 600
    *           width: 100
    *           height: 200 or 10%
    *   maxCols:
    *   items: [ResizableNode]
    **/
    constructor: function(){
      this.items = [];
      this.hmargin = 15;
      this.vmargin = 15;
    },

    startup: function(){
      this.inherited(arguments);
      this.items.forEach(lang.hitch(this, function(item){
        this._placeItem(item);
      }));
      this.resize();
    },

    _placeItem: function(item){
      if(item.domNode){
        html.place(item.domNode, this.domNode);
      }else{
        html.place(item, this.domNode);
      }
    },

    addItem: function(item){
      this.items.push(item);
      this._placeItem(item);
      this.resize();
    },

    addItems: function(items){
      this.items = this.items.concat(items);
      this.items.forEach(lang.hitch(this, function(item){
        this._placeItem(item);
      }));
      this.resize();
    },

    removeItem: function(itemLabel){
      var i;
      for(i = 0; i < this.items.length; i++){
        if(this.items[i].label === itemLabel){
          if(this.items[i].domNode){
            this.items[i].destroy();
          }else{
            html.destroy(this.items[i]);
          }
          this.items.splice(i, 1);
          this.resize();
          return;
        }
      }
    },

    empty: function(){
      var i;
      for(i = 0; i < this.items.length; i++){
        if(this.items[i].domNode){
          this.items[i].destroy();
        }else{
          html.destroy(this.items[i]);
        }
      }
      this.items = [];
    },

    resize: function(){
      var box, itemSize, cpr;
      box = html.getMarginBox(this.domNode);

      itemSize = this.getItemSize(box);
      cpr = Math.floor((box.w + this.hmargin) / (itemSize.width + this.hmargin));

      this.items.forEach(lang.hitch(this, function(item, i){
        this.setItemPosition(item, i, itemSize, cpr);
      }));
    },

    getItemSize: function(box){
      var size = {}, i;
      if(this.strategy === 'fixWidth'){
        size.width = this.itemSize.width;
        size.height = this.itemSize.height;
      }else if(this.strategy === 'breakWidth'){
        for(i = 0; i < this.itemSize.length; i++){
          if(box.w <= this.itemSize[i].screenWidth){
            size.width = this.itemSize[i].width;
            size.height = this.itemSize[i].height;
            break;
          }
        }
      }else if(this.strategy === 'fixCols'){
        size.width = (box.w - this.hmargin * (this.maxCols - 1)) / this.maxCols;
        if(typeof this.itemSize.height === 'number'){
          size.height = this.itemSize.height;
        }else{
          size.height = size.width *
          parseFloat(this.itemSize.height.substring(0, this.itemSize.height.length - 1)) / 100;
        }
      }
      return size;
    },

    setItemPosition: function(item, i, itemSize, cpr){
      i++;
      var col = i % cpr;
      var row = Math.ceil(i / cpr);

      if(col === 0){
        col = cpr;
      }
      var itemStyle = {
        position: 'absolute',
        top: ((this.vmargin + itemSize.height) * (row - 1)) + 'px'
      };

      itemStyle[window.isRTL? 'right': 'left'] =
        ((this.hmargin + itemSize.width) * (col - 1)) + 'px';

      if (itemSize.width >= 0){
        itemStyle.width = itemSize.width + 'px';
      }
      if (itemSize.height >= 0){
        itemStyle.height = itemSize.height + 'px';
      }
      html.setStyle(item.domNode? item.domNode: item, itemStyle);
    }

  });
});