<!--TODO(aghassemi) These paths needs to be relative until issue:
https://github.com/Polymer/vulcanize/pull/36 is merged
otherwise they won't get vulcanized -->
<link rel="import" href="../../third-party/polymer/polymer.html">
<link rel="import" href="../../third-party/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../../third-party/core-header-panel/core-header-panel.html">
<link rel="import" href="../../third-party/core-toolbar/core-toolbar.html">
<link rel="import" href="../../third-party/core-menu/core-menu.html">
<link rel="import" href="../../third-party/core-item/core-item.html">
<link rel="import" href="../../third-party/core-selector/core-selector.html">
<link rel="import" href="../../third-party/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../third-party/paper-toast/paper-toast.html">
<link rel="import" href="../../third-party/core-icons/hardware-icons.html">
<link rel="import" href="../../third-party/core-icons/social-icons.html">
<link rel="import" href="../../views/publish/component.html"/>
<link rel="import" href="../../views/status/component.html"/>
<link rel="import" href="../../views/error/component.html"/>
<link rel="import" href="../../views/help/component.html"/>
<link rel="import" href="../../views/loading/component.html"/>
<link rel="import" href="../../views/pipes/component.html"/>
<link rel="import" href="../../views/redirect-pipe-dialog/component.html"/>
<link rel="import" href="../../views/neighborhood/component.html"/>
<link rel="import" href="../../pipe-viewers/builtin/console/component.html"/>
<link rel="import" href="../../pipe-viewers/builtin/console/panic/component.html"/>
<link rel="import" href="../../pipe-viewers/builtin/git/status/component.html"/>
<link rel="import" href="../../pipe-viewers/builtin/vlog/component.html"/>
<link rel="import" href="../../libs/ui-components/blackhole/component.html"/>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<polymer-element name="p2b-page">
  <template>
    <link rel="stylesheet" href="../common/common.css">
    <link rel="stylesheet" href="component.css">
    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer>
        <core-toolbar>
          <h1>Pipe To Browser</h1>
        </core-toolbar>

        <core-menu sidebar valueattr="key" selected="{{ selectedSubPageKey }}">
          <template repeat="{{ subPage in subPages }}">
            <core-item key="{{ subPage.key }}" icon="{{ subPage.icon }}" label="{{ subPage.name }}" on-click="{{ activateSubPage }}"></core-item>
          </template>
        </core-menu>

      </core-header-panel>
      <core-header-panel main>
        <core-toolbar >
          <paper-icon-button icon="menu" on-click="{{ toggleDrawer }}"></paper-icon-button>
          <h2>{{ pageTitle }}</h2>
        </core-toolbar>

        <core-selector id="subPagesSelector" valueattr="key" selected="{{ selectedSubPageKey }}">
         <template repeat="{{ subPage in subPages }}">
            <div class="sub-page" key="{{ subPage.key }}"></div>
         </template>
        </core-selector>
      </core-header-panel>
    </core-drawer-panel>
     <paper-toast id="toast"></paper-toast>
  </template>
  <script>
    Polymer('p2b-page', {

      /*
       * Title of the page
       * @type {string}
       */
      pageTitle: '',

      /*
       * SubPageItem represents top level sub pages that have a sidebar navigation link
       * and a content area which gets displayed when corresponding sidebar item
       * is activated by the end user.
       * @type {object}
       */
      subPages: [],

      /*
       * Currently selected sub page's key
       * @type {string}
       */
      selectedSubPageKey: '',

      /*
       * Sets the content of the sub page identified by its key and also selects the corresponding sidebar item for it
       * @param {string} key Key of the sub page
       * @param {DOMElement} el Element to become the content of the sub page
       */
      setSubPage: function(key, el) {
        // TODO(aghassemi)
        // This setTimeout is a work-around because template may not have been activated when this is called.
        // Issue brought up with Polymer team.
        var self = this;
        setTimeout(function() {
          var subPage = self.$.subPagesSelector.querySelector('div[key="' + key + '"]');
          if(!subPage) {
            return;
          }
          if(el.parentNode !== subPage) {
            subPage.innerHTML = '';
            subPage.appendChild(el);
          }
          self.selectedSubPageKey = key;
        });
      },

     /*
      * Displays a message toast for a few seconds e.g. "Saved Successfully"
      * @param {string} text Text of the toast
      */
      showToast: function(text) {
        this.$.toast.text = text;
        this.$.toast.show();
      },

      /*
       * handler for when a sidebar item is clicked
       * @param {string} key Key of the page
       * @private
       */
      activateSubPage: function(e) {
        // find the targeted subPage item
        var key = e.toElement.getAttribute('key');
        var subPage = this.subPages.filter(function(s) {
          return s.key === key;
        })[0];

        // call the sub page's delegate
        if(subPage.onActivate) {
          subPage.onActivate.call(subPage.onActivate);
        }

        // toggle the drawer
        this.toggleDrawer();
      },

      /*
       * toggles the drawer
       * @private
       */
      toggleDrawer: function() {
        this.$.drawerPanel.togglePanel();
      }

    });
  </script>
</polymer-element>