<!--
  This in an HTML Import-able file that contains the JS and HTML Templates for
  the version-sk element.

  To use this file import it:

    <link href="/res/imp/version-sk.html" rel="import" />

  Properties:
    commit - The Git commit hash of the running code.

    short_commit - A shortened versioned of commit.

    date - The build date of the running code.

  Methods:
    None.

  Events:
    None.
-->
<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/res/imp/bower_components/paper-tooltip/paper-tooltip.html">
<dom-module id="version-sk">
  <template>
    <style>
    :host {
      font-size: 15px;
      color: var(--version-sk-color, #000000);
    }
    paper-icon-button {
      --iron-icon-height: 15px;
      --iron-icon-width: 15px;
      padding: 0px;
    }
    .hidden {
      visibility: hidden;
    }
    </style>
    <span>
      <paper-icon-button id="reloadButton" icon="icons:refresh" on-click="_reload" class$="{{_buttonClass(_needReload)}}"></paper-icon-button>
      <paper-tooltip for="reloadButton">A new version is available. Click to reload.</paper-tooltip>
      version: <a id="link" href$="{{_commitUrl(commit)}}" title$="{{date}}" target="_blank">{{short_commit}}</a>
    </span>
  </template>
  <script>
  (function() {
    Polymer({
      is: "version-sk",

      properties: {
        /**
         * The Git commit hash of the running code.
         */
        commit: {
          type: String,
          value: "???",
          readOnly: true,
        },

        /**
         * A shortened versioned of commit.
         */
        short_commit: {
          type: String,
          computed: "_shortCommit(commit)",
        },

        /**
         * The build date of the running code.
         */
        date: {
          type: String,
          value: "???",
          readOnly: true,
        },

        _needReload: {
          type: Boolean,
          value: false,
        },
      },

      ready: function() {
        this._getVersion();
        setInterval(function() {
          this._getVersion();
        }.bind(this), 300000);
      },

      _buttonClass: function(needReload) {
        if (!needReload) {
          return "hidden";
        }
        return "";
      },

      _commitUrl: function(commit) {
        return "https://skia.googlesource.com/buildbot/+/" + commit;
      },

      _getVersion: function() {
        sk.get("/json/version").then(JSON.parse).then(function(json) {
          if (this.commit == "???") {
            this._setCommit(json.commit);
            this._setDate(json.date);
          } else if (this.commit != json.commit) {
            console.log("Need reload!");
            this._needReload = true;
          }
        }.bind(this));
      },

      _reload: function() {
        window.location.href = window.location.href;
      },

      _shortCommit: function(commit) {
        return commit.substring(0, 7);
      },
    });
  }());
  </script>
</dom-module>