///////////////////////////////////////////////////////////////////////////
// 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/on',
  'dojo/dom-style',
  'dojo/dom-class',
  'dojo/dom-construct',
  'dojo/dom-geometry',
  'dojo/mouse',
  'dojo/_base/fx',
  'dojo/fx',
  'dojo/dnd/move',
  'dojo/Deferred',
  'dojox/layout/ResizeHandle',
  'jimu/utils',
  'jimu/BaseWidgetPanel',
  'dijit/_TemplatedMixin',
  'dojo/text!./Panel.html'
],
function(declare, lang, on, domStyle, domClass, domConstruct, domGeometry, mouse,
  baseFx, coreFx, Move, Deferred, ResizeHandle, utils, BaseWidgetPanel, _TemplatedMixin, template) {
  /* global jimuConfig*/
  var DEFAULT_WIDTH = 350, DEFAULT_HEIGHT = 480, MARGIN_LEFT = 50;

  return declare([BaseWidgetPanel, _TemplatedMixin], {
    baseClass: 'jimu-panel jimu-launchpad-panel',
    templateString: template,
    titleHeight: 33,
    normalPosition: null,
    lastWindowState: null,
    openAnimation: 'fadeIn',
    closeAnimation: 'fadeOut',
    animationDuration: 400,
    _device: 'desktop', // 'desktop' or 'mobile'

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

      this._makeOriginalBox();
      domStyle.set(this.colorfulHeader, 'background-color',
        this.config.backgroundColor || '#FFFFFF');

      this.own(on(this.iconNode, mouse.enter, lang.hitch(this, function(){
        if (this.windowState === 'minimized') {
          this.disableMoveable();
        }
      })));
      this.own(on(this.iconNode, mouse.leave, lang.hitch(this, function(){
        if (this.windowState === 'minimized') {
          this.makeMoveable(this.domNode, 40, 40);
        }
      })));
      this.own(on(this.iconNode, 'click', lang.hitch(this, function(){
        if (this.windowState === 'minimized') {
          this.panelManager.normalizePanel(this);
          domStyle.set(this.domNode, 'overflow', 'visible');
        }
      })));
    },

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

      this.panelManager.normalizePanel(this);
    },

    _makeOriginalBox: function() {
      this._originalBox = {
        w: this.position.width || DEFAULT_WIDTH,
        h: this.position.height || DEFAULT_HEIGHT,
        l: this.position.left || 0,
        t: this.position.top || 0
      };
    },

    makeMoveable: function(handleNode, width, tolerance) {
      this.disableMoveable();
      var containerBox = this._getLayoutBox();
      containerBox.l = containerBox.l - width + tolerance;
      containerBox.w = containerBox.w + 2 * (width - tolerance);

      this.moveable = new Move.boxConstrainedMoveable(this.domNode, {
        box: containerBox,
        handle: handleNode || this.titleNode,
        within: true
      });
      this.own(on(this.moveable, 'MoveStart', lang.hitch(this, this.onMoveStart)));
      this.own(on(this.moveable, 'Moving', lang.hitch(this, this.onMoving)));
      this.own(on(this.moveable, 'MoveStop', lang.hitch(this, this.onMoveStop)));
    },

    disableMoveable: function() {
      if (this.moveable) {
        this.moveable.destroy();
        this.moveable = null;
      }
    },

    makeResizable: function() {
      this.disableResizable();
      this.resizeHandle = new ResizeHandle({
        targetId: this,
        minWidth: this._originalBox.w,
        minHeight: this._originalBox.h,
        activeResize: false
      }).placeAt(this.domNode);
      this.resizeHandle.startup();
    },

    disableResizable: function() {
      if (this.resizeHandle) {
        this.resizeHandle.destroy();
        this.resizeHandle = null;
      }
    },

    onMoveStart: function(mover){
      if(window.isRTL){
        var containerBox = this._getLayoutBox(),
            domBox = domGeometry.getMarginBox(this.domNode),
            rightPx = domStyle.get(mover.node, 'right');
        domStyle.set(mover.node, 'left',
            (containerBox.w - domBox.w - parseInt(rightPx, 10)) + 'px');
        domStyle.set(mover.node, 'right', '');
      }
    },

    onMoving: function(){
      domStyle.set(this.domNode, 'opacity', 0.9);
    },

    onMoveStop: function(){
      var panelBox;

      domStyle.set(this.domNode, 'opacity', 1);
      panelBox = domGeometry.getMarginBox(this.domNode);
      this.position.left = panelBox.l;
      this.position.top = panelBox.t;
    },

    _getLayoutBox: function() {
      //This panel's position always relates to map.
      return domGeometry.getMarginBox(jimuConfig.mapId);
    },

    _onMinNodeClick: function(){
      this.panelManager.minimizePanel(this);
      domStyle.set(this.domNode, 'overflow', 'hidden');
    },

    _onMaxNodeClick: function(){
      if(this.windowState === 'normal') {
        this.panelManager.maximizePanel(this);
        domClass.add(this.maxNode, 'maximized');
      } else if(this.windowState === 'maximized'){
        this.panelManager.normalizePanel(this);
        domClass.remove(this.maxNode, 'maximized');
      }
    },

    _onCloseBtnClicked: function(evt) {
      evt.stopPropagation();
      this.panelManager.closePanel(this, 'wipe');
    },

    _minimize: function(){
      this.disableMoveable();
      this.disableResizable();

      var def = new Deferred(), animArray = [];
      animArray.push(baseFx.animateProperty({
        node: this.domNode,
        properties: {
          height: 40,
          width: 40
        },
        duration: this.animationDuration,
        onEnd: lang.hitch(this, function(){
          domStyle.set(this.containerNode, 'display', 'none');
          domStyle.set(this.domNode, 'border-radius', '50%');
          domStyle.set(this.domNode, '-webkit-border-radius', '50%');
          this.makeMoveable(this.domNode, 40, 40);
        })
      }));
      animArray.push(baseFx.animateProperty({
        node: this.titleNode,
        properties: {
          height: 40,
          width: 40,
          'background-color': this.config.backgroundColor
        },
        duration: this.animationDuration,
        onEnd: lang.hitch(this, function(){
          domClass.remove(this.titleNode, 'jimu-main-background');
        })
      }));
      animArray.push(baseFx.animateProperty({
        node: this.iconNode,
        properties: {
          height: 20,
          width: 20
        },
        duration: this.animationDuration,
        onEnd: function(){
          def.resolve();
        }
      }));
      coreFx.combine(animArray).play();

      return def;
    },

    _maximize: function(){
      var box = this._getLayoutBox(), def = new Deferred();
      baseFx.animateProperty({
        node: this.domNode,
        properties: {
          top: 0,
          height: box.h,
          width: box.w
        },
        duration: this.animationDuration,
        onEnd: function(){
          def.resolve();
        }
      }).play();

      return def;
    },

    _normalize: function(){
      var box, width, def = new Deferred(), animArray = [];

      domStyle.set(this.containerNode, 'display', '');
      domStyle.set(this.domNode, 'border-radius', '');
      domStyle.set(this.domNode, '-webkit-border-radius', '');

      if(window.appInfo.isRunInMobile){
        box = this._getLayoutBox();
        width = box.w;
        animArray.push(baseFx.animateProperty({
          node: this.domNode,
          properties: {
            height: box.h / 2,
            width: width,
            left: 0,
            top: box.h / 2
          },
          duration: this.animationDuration,
          onEnd: function(){
            def.resolve();
          }
        }));
      }else{
        width = this.position.width;
        animArray.push(baseFx.animateProperty({
          node: this.domNode,
          properties: {
            height: this.position.height,
            width: width
          },
          duration: this.animationDuration,
          onEnd: function(){
            def.resolve();
          }
        }));
      }
      animArray.push(baseFx.animateProperty({
        node: this.titleNode,
        properties: {
          height: 30,
          width: width
        },
        duration: this.animationDuration,
        onEnd: lang.hitch(this, function(){
          domStyle.set(this.titleNode, 'background-color', '');
          domStyle.set(this.titleNode, 'width', '100%');
          domClass.add(this.titleNode, 'jimu-main-background');
        })
      }));
      animArray.push(baseFx.animateProperty({
        node: this.iconNode,
        properties: {
          height: 16,
          width: 16
        },
        duration: this.animationDuration
      }));

      coreFx.combine(animArray).play();
      return def;
    },

    _setPositionStyle: function(pos){
      var style;

      if(this.position.zIndex){
        pos.zIndex = this.position.zIndex;
      }
      this.position.left = pos.left;
      this.position.top = pos.top;
      this.position.width = pos.width;
      this.position.height = pos.height;

      style = utils.getPositionStyle(pos);
      lang.mixin(style, pos.borderRadiusStyle);
      domStyle.set(this.domNode, style);
    },

    onWindowResize: function(){
      var position = {}, box;

      if(this.windowState === 'minimized'){
        return; //do nothing if panel is minimized.
      }

      if(window.appInfo.isRunInMobile){
        box = this._getLayoutBox();

        if(this.windowState === 'maximized'){
          position.top = 0;
          position.height = box.h;
        }else{
          position.top = box.h / 2;
          position.height = box.h / 2;
        }

        domStyle.set(this.domNode, {
          left: 0,
          top: position.top + 'px',
          right: 0,
          height: position.height + 'px',
          width: 'auto'
        });
        this.resize();
        if(this._device !== 'mobile'){
          this._device = 'mobile';
          this._onResponsible();
        }
      }else{
        if(this._device !== 'desktop'){
          this._device = 'desktop';
          position = lang.clone(this.position);
          this.setWindowState('normal');
          domStyle.set(this.domNode, {
            left: position.left + 'px',
            top: position.top + 'px',
            height: position.height + 'px',
            width: position.width + 'px'
          });
          this.resize();
          this._onResponsible();
        }
      }
    },

    /**
     * @override
     * @param {Object} position      contains these fields: left, top, width, height,
     * margin and index
     * @param {[type]} containerNode [description]
     */
    setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin) + MARGIN_LEFT;
      position.top -= position.margin * row;

      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },

    /**
     * @override
     * @return {[type]} [description]
     */
    onNormalize: function(){
      this._normalize().then(lang.hitch(this, function(){
        domStyle.set(this.iconNode, 'cursor', 'default');
        domClass.remove(this.domNode, 'minimized');
        domClass.remove(this.domNode, 'maximized');

        this.resize();
        this._onResponsible();
      }));
    },

    /**
     * @override
     * @return {[type]} [description]
     */
    onMinimize: function(){
      this.inherited(arguments);
      this._minimize().then(lang.hitch(this, function(){
        domStyle.set(this.iconNode, 'cursor', 'pointer');
        domClass.remove(this.domNode, 'maximized');
        domClass.add(this.domNode, 'minimized');
      }));
    },

    /**
     * Restore windowState to "normal" when user closes this panel
     * @return {[type]} [description]
     */
    onClose: function(){
      this.inherited(arguments);
      this.setWindowState('normal');
      this.onNormalize();
    },

    onMaximize: function(){
      this.inherited(arguments);
      this._maximize().then(lang.hitch(this, function(){
        domStyle.set(this.iconNode, 'cursor', 'default');
        domClass.remove(this.domNode, 'minimized');
        domClass.add(this.domNode, 'maximized');
        this.resize();
      }));
    },

    /**
     * @override
     * @return {[type]} [description]
     */
    resize: function(tmp) {
      var pos, style;

      if(!tmp){
        this.inherited(arguments);
        return;
      }

      pos = {
        left: tmp.l ? tmp.l : this.position.left,
        top: tmp.t ? tmp.t : this.position.top,
        width: tmp.w ? tmp.w : this.position.width,
        height: tmp.h ? tmp.h : this.position.height,
        zIndex: this.position.zIndex
      };

      this.position = pos;
      style = utils.getPositionStyle(this.position);
      if(window.isRTL && 'right' in style){
        style.left = style.right;
        style.right = '';
      }
      domStyle.set(this.domNode, style);

      this.inherited(arguments);
    },

    _onResponsible: function() {
      if(window.appInfo.isRunInMobile){
        if (this.windowState !== 'minimized') {
          this.disableMoveable();
        }
        this.disableResizable();
        domStyle.set(this.maxNode, 'display', '');
        domStyle.set(this.minNode, 'margin', '0 10px');
      } else {
        domStyle.set(this.maxNode, 'display', 'none');
        domStyle.set(this.minNode, 'margin', '');
        this.makeResizable();
        this.makeMoveable(this.titleLabelNode, this.position.width, this.position.width * 0.25);
      }
    }
  });
});