///////////////////////////////////////////////////////////////////////////
// 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/query',
  'dojo/_base/html',
  'dojo/topic',
  'dijit/_TemplatedMixin',
  'dojo/text!./Panel.html',
  'jimu/BaseWidgetPanel',
  'jimu/utils'
], function (
  declare,
  lang,
  on,
  query,
  html,
  topic,
  _TemplatedMixin,
  template,
  BaseWidgetPanel,
  utils
) {
  /* global jimuConfig */
  return declare([BaseWidgetPanel, _TemplatedMixin], {

    baseClass: 'jimu-panel jimu-pocket-panel',

    templateString: template,

    postCreate: function () {
      this.inherited(arguments);
      this.own(on(this.maxNode, "click", lang.hitch(this, "_onMaxBtnClicked")));
    },

    startup: function () {
      //get the configured widget info
      var configs;
      configs = this.getAllWidgetConfigs();
      if (Array.isArray(this.config.widgets)) {
        configs = this.config.widgets;
      } else {
        configs = [this.config];
      }
      //if widget is configured remove the message
      if (configs.length > 0) {
        html.empty(this.containerNode);
      }
      //on startup call setPosition so that all the positions of controls get updated
      this._setPosition();
      this.inherited(arguments);
    },

    /**
     * This function is used to change the position of the panel & its size
     * depending upon the modes(desktop/mobile)
     */
    resize: function () {
      this._setPosition();
    },

    /**
     * This function is used to destroy the run-time files(position.css) created by
     * pocket theme when user switches from this theme to another theme like
     * foldable, dart etc..
     */
    destroy: function () {
      var styleLink, domNodes;
      //On destroy disable the position css applied to shift the controls,
      //so that it will not impact other themes
      styleLink = document.getElementById(this.baseClass + 'positionCSS');
      if (styleLink) {
        styleLink.disabled = true;
      }
      domNodes = query(".esriControlsBR");
      if (window.isRTL) {
        html.setStyle(domNodes[0], { "left": "0px" });
      } else {
        html.setStyle(domNodes[0], { "right": "0px" });
      }
      this.inherited(arguments);
    },

    /**
     * This function returns value true/false based the execution of app
     * whether it is running in mobile mode or not
     */
    _isShowingPanelOfMobileMode: function () {
      if (window.appInfo.isRunInMobile && window.innerWidth <= 760) {
        return true;
      }
      return false;
    },

    /**
     * This function is used to maximize the panel when user
     * clicks on max button which is available/active only in mobile mode
     */
    _onMaxBtnClicked: function (evt) {
      evt.stopPropagation();
      if (this._isShowingPanelOfMobileMode()) {
        if (this.windowState === 'maximized') {
          this.panelManager.normalizePanel(this);
        } else {
          this.panelManager.maximizePanel(this);
        }
        this._setPosition();
      }
    },

    /**
     * This function is used to set the positions of the widgets and styles of the panel.
     * This will consider all layouts, states, mobile mode etc.
     */
    _setPosition: function () {
      var style, currentPanel, isInMobileMode, titleNodeHeight;
      style = utils.getPositionStyle(this.position);
      //domNode & titleNode use to get null once theme is changed,
      //hence used getPanelById method to get current panel
      currentPanel = this.panelManager.getPanelById(this.id);
      isInMobileMode = this._isShowingPanelOfMobileMode();
      //If app is running in mobile set positions according to mobile else desktop
      //also based on layout shift the controls if required
      if (isInMobileMode) {
        style.width = '100%';
        style.right = '0';
        style.left = '0';
        style.bottom = '0';
        //Based on state set the map positions also as in mobile only 50% of map will be visible
        if (this.windowState === 'maximized') {
          style.height = '100%';
          style.width = '100%';
          style.top = '0';
          topic.publish('changeMapPosition', { bottom: "0" });
        } else {
          style.height = '50%';
          style.width = '100%';
          style.top = '50%';
          topic.publish('changeMapPosition', { bottom: "50%" });
        }
        html.setStyle(currentPanel.domNode, style);
        html.place(currentPanel.domNode, jimuConfig.layoutId);
        //In mobile mode show title node,
        //so that user can change the state of panel using maximize button
        html.setStyle(currentPanel.titleNode, "display", "block");
        titleNodeHeight = currentPanel.titleNode.offsetHeight;
        html.setStyle(currentPanel.containerNode, {
          height: "calc(100% - " + titleNodeHeight + "px)"
        });
      } else {
        style.height = 'auto';
        if (currentPanel.titleNode) {
          html.setStyle(currentPanel.titleNode, "display", "none");
        }
        html.setStyle(currentPanel.containerNode, { height: "100%" });
        topic.publish('changeMapPosition', { bottom: "0px" });
        html.place(currentPanel.domNode, jimuConfig.mapId);
        html.setStyle(currentPanel.domNode, style);
      }
      //Update the attribution and logo positions
      this._setAttributionAndLogoPosition(style);
      //Add remove styles to shift the controls based on layout
      //Condition 1. Layout 1 & not RTL
      //Condition 2. Layout 1 and RTL
      if ((style.right === "auto" && !window.isRTL) ||
        (style.right === "15px" && window.isRTL)) {
        this._setPositionStyles(true);
      } else {
        this._setPositionStyles(false);
      }
    },

    /**
     * This function is used to set the attribution and logo positions
     */
    _setAttributionAndLogoPosition: function (style) {
      var domNodes;
      domNodes = query(".esriControlsBR");
      //In default layout move logo before panel
      if (domNodes && domNodes.length > 0 && style.left === "auto") {
        html.setStyle(domNodes[0], { "right": "380px" });
      } else if (domNodes && domNodes.length > 0) {
        //If Default layout and in RTL mode
        //else if & else is for mobile mode and other layouts
        if ((style.right === "auto" && window.isRTL)) {
          html.setStyle(domNodes[0], { "left": "380px" });
        } else if ((style.right !== "auto" && window.isRTL)) {
          html.setStyle(domNodes[0], { "left": "0px" });
        } else {
          html.setStyle(domNodes[0], { "right": "0px" });
        }
      }
    },

    /**
     * This function is used to add or remove the styles to shift controls
     */
    _setPositionStyles: function (shiftPositions) {
      var styleLink, info;
      styleLink = document.getElementById(this.baseClass + 'positionCSS');
      if (shiftPositions) {
        if (styleLink) {
          styleLink.disabled = false;
        } else {
          info = utils.getUriInfo(this.uri);
          utils.loadStyleLink(this.baseClass + 'positionCSS',
            info.folderUrl + "positions.css", null);
        }
      } else if (styleLink) {
        styleLink.disabled = true;
      }
    }
  });
});