<!--
  The <gold-app-sk> custom element declaration.

  This is the container element for the Skia Gold frontend.

  Attributes: None

  Events: None

  Methods: None

-->

<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="../common/imp/app-sk.html" />

<link rel="import" href="byblame-page-sk.html" />
<link rel="import" href="cluster-page-sk.html" />
<link rel="import" href="commits-dialog-sk.html">
<link rel="import" href="comp-page-sk.html" />
<link rel="import" href="detail-page-sk.html" />
<link rel="import" href="diff-page-sk.html" />
<link rel="import" href="failures-page-sk.html" />
<link rel="import" href="gold-menu-sk.html" />
<link rel="import" href="gold-status-sk.html" />
<link rel="import" href="help-page-sk.html" />
<link rel="import" href="ignores-page-sk.html" />
<link rel="import" href="list-page-sk.html" />
<link rel="import" href="search-page-sk.html" />
<link rel="import" href="trybot-page-sk.html" />

<dom-module id="gold-app-sk">
  <template>
    <style>
    app-sk {
      --app-sk-main: {
        background-color: #FFFFFF;
        font-family: Roboto, Arial, sans-serif;
      };
      --app-sk-toolbar: {
        background-color: #D95F02;
        font-family: Roboto, Arial, sans-serif;
      };
      login-sk{
        --login-sk-color: white;
      };
    }

    #mainContentWrapper {
      padding-left: 0.5em
      padding-right: 0.5em
    };

    </style>

    <app-sk id="mainApp" mode="standard" responsive_width="600px" drawer_width="12em" class="fit" flex>
      <h2 header>[[_title]]</h2>
      <gold-status-sk rtoolbar></gold-status-sk>
      <gold-menu-sk navigation></gold-menu-sk>
      <div id="mainContentWrapper">
         <iron-pages id="pagesContainer" attr-for-selected="data-route" selected="{{route}}" selected-attribute="activepage">
          <section data-route="byblame">
            <byblame-page-sk></byblame-page-sk>
          </section>
          <section data-route="ignores">
            <ignores-page-sk></ignores-page-sk>
          </section>
          <section data-route="list">
            <list-page-sk></list-page-sk>
          </section>
          <section data-route="trybot">
            <trybot-page-sk></trybot-page-sk>
          </section>
          <section data-route="changelists">
            <changelists-page></changelists-page>
          </section>
          <section data-route="failures">
            <failures-page-sk></failures-page-sk>
          </section>
          <section data-route="search">
            <search-page-sk></search-page-sk>
          </section>
          <section data-route="triagelog">
            <triagelog-page-sk></triagelog-page-sk>
          </section>
          <section data-route="help">
            <help-page-sk></help-page-sk>
          </section>
          <section data-route="detail">
            <detail-page-sk></detail-page-sk>
          </section>
          <section data-route="diff">
            <diff-page-sk></diff-page-sk>
          </section>
          <section data-route="cluster">
            <cluster-page-sk></cluster-page-sk>
          </section>
          <section data-route="compare">
            <comp-page-sk></comp-page-sk>
          </section>
          <section data-route="notfound">
            <help-page-sk notfound></help-page-sk>
          </section>
       </iron-pages>
       <commits-dialog-sk></commits-dialog-sk>
     </div>
    </app-sk>

  </template>
  <script>
    Polymer({
      is: "gold-app-sk",

      properties: {
        route: {
          type: String,
          value: "byblame"
        },
        _title: {
          type: String,
          value: sk.app_config.title
        }
      },

      ready: function() {
        // Set up in-app routing using the history api.
        this._setRoute('/old-byblame', 'byblame');
        this._setRoute('/cluster', 'cluster');
        this._setRoute('/cmp', 'compare');
        this._setRoute('/detail', 'detail');
        this._setRoute('/diff', 'diff');
        this._setRoute('/failures', 'failures');
        this._setRoute('/help', 'help');
        this._setRoute('/list', 'list');
        this._setRoute('/search', 'search');
        this._setRoute('/trybot', 'trybot');

        // Don't wire up the private routes. This is just cosmetics, the real
        // enforcement happens on the backend where the endpoint is disabled.
        if (!sk.app_config.isPublic) {
          this._setRoute('/ignores', 'ignores');
        }

        // TODO(stephana): Remove the alias once the link to legacysearch has
        // been removed from Gerrit.
        page("/legacysearch", function() {
          page.redirect("/search" + window.location.search);
        });

        // Force hitting the server if logout was selected.
        page("/logout", function(ctx) {
          this.async(function() {
            var p = "/logout/?redirect=" + encodeURIComponent(window.location);
            window.history.replaceState(ctx.state,
                                        ctx.title,
                                        p);
            window.location.reload(true);
          });
        }.bind(this));

        const litHtmlPages = [
          '/',  // by blame page
          '/changelists',
          '/triagelog',
        ];
        // lit-html pages should not be handled by iron-pages.
        litHtmlPages.forEach((href) => {
          page(href, () => {
            window.location.href = href;
          })
        });


        // All other route go to 'notfound' and byblame is the default view.
        this._setRoute('*', 'notfound');
        this.route = "byblame";

        // Don't use hashbangs in the URL.
        page({ hashbang: false });

        // Notify the page elements that the page has been selected.
        this.listen(this.$.pagesContainer, "iron-deselect", "_pagesDeselect");
      },

      _pagesSelect: function(el, ctx) {
        // Make sure the new views called after the URL is updated by page.js.
        this.async(function() {
          el.pageSelected(ctx);
        }.bind(this));
      },

      _pagesDeselect: function(ev, obj) {
        if (obj.item.dataset.route) {
          obj.item.children[0].pageDeselected();
        }
      },

      _setRoute: function(path, routeID) {
        var pageElement = this.$$("section[data-route="+routeID+"]").children[0];
        page(path, (function(ctx) {
          this.route = routeID;
          ctx.routeID = routeID;
          this._pagesSelect(pageElement, ctx);
        }).bind(this));
      }
    });
  </script>
</dom-module>