<!--
  The common.js file must be included before this file.
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <status-sk>

  To use this file import it:

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

  Usage:

    <status-sk></status-sk>

  Properties:
    load: Number, How many commits should be loaded, defaulting to 35.
    repo: String, The name of the repo that should be shown.
    repo_base: String, the base url to which a commit hash or branch name can
        be appended, such that the url will link to the source code at that head.
    repos: Array of repo names.

  Methods:
    None.

  Events:
    None.
-->

<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.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-spinner/paper-spinner.html">

<link rel="import" href="/res/common/imp/app-sk.html">
<link rel="import" href="/res/common/imp/icons-sk.html">
<link rel="import" href="/res/common/imp/styles-sk.html">
<link rel="import" href="/res/common/imp/url-params-sk.html">

<link rel="import" href="autoroll-widget-sk.html">
<link rel="import" href="commits-canvas-sk.html">
<link rel="import" href="commits-data-sk.html">
<link rel="import" href="commits-table-sk.html">
<link rel="import" href="fuzzer-widget-sk.html">
<link rel="import" href="gold-status-sk.html">
<link rel="import" href="perf-status-sk.html">
<link rel="import" href="status-menu-section-sk.html">
<link rel="import" href="tree-status-sk.html">

<dom-module id="status-sk">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning styles-sk">
      :host{
        --app-sk-main: {
          background-color: transparent;
          font-family: sans-serif;
        };
        --app-sk-drawer: {
          overflow: auto;
        };
        --menu-item-sk-icon-color: var(--color-lightorange);
        --paper-item: {
          font-size: 14px;
          padding: 0px;
        };
        --paper-item-min-height: 26px;
        --paper-toolbar-height: 56px;
        --paper-toolbar-sm-height: 56px;
        --status-sk-icon-color: var(--color-lightorange);
        --status-sk-main-text-color: black;
        --status-sk-header-background-color: var(--color-lightgreen);
        --status-sk-header-text-color: white;
      }
      app-sk {
        --app-sk-toolbar: {
          color: var(--status-sk-header-text-color);
          font-size: 15px;
          font-family: sans-serif;
          height: 56px;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0px;
          text-align: center;
          background-color: var(--status-sk-header-background-color);
        };
        login-sk{
          --login-sk-color: var(--status-sk-header-text-color);
        };
      }

      autoroll-widget-sk, gold-status-sk, perf-status-sk {
        font-size: 12px;
      }

      .container {
        margin-bottom: 0px;
        margin-top: 4px;
        padding-bottom: 4px;
        padding-top: 4px;
      }

      .container h2 {
        font-size: 16px;
        margin-bottom: 0px;
        margin-top: 0px;
      }

      paper-item {
        color: #000000;
        text-transform: none;
      }
      paper-item > iron-icon {
        color: var(--status-sk-icon-color);
        margin-right: 5px;
      }

      #can {
        z-index: 5;
      }

      a {
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      h1 {
        text-transform: capitalize;
      }

      h1.shrunk {
        font-size:1.5em;
      }
    </style>

    <!-- To keep all the data binding sane and understandable, one-way and two-way bindings
    have been used very purposefully.  That is, two-way bindings are *only* used when the data
    flows out of the element.  This makes it easier to tell, at a glance, where data originates
    from and where it is simply being read.  Additionally, the attributes are alphabetized,
    with inputs listed first and output attributes listed second(where sensible). -->

    <!-- these must go above the points at which their bound values are used.  Otherwise,
    the bound values get set to "" and it clobbers the stored values -->
    <url-param-sk name="commit_label" value="{{label}}" default="author"></url-param-sk>
    <url-param-sk name="filter" value="{{filter}}" default="default"></url-param-sk>
    <url-param-sk name="search_value" value="{{search}}"></url-param-sk>

    <app-sk id="app" class="fit"
        drawer_width="220px"
        mode="waterfall"
        tall_class="standard"
        responsive_width="800px"
        header_height="56px"
        header_responsive_height="56px"
        logged_in_email="{{email}}"
        login_data="{{login_data}}"
        narrow="{{narrow}}">

      <div class="container" navigation>
        <h2>Navigation</h2>
        <status-menu-section-sk repos="[[repos]]"></status-menu-section-sk>
      </div>

      <div class="container" navigation>
        <h2>AutoRollers</h2>
        <autoroll-widget-sk navigation
          reload="[[reload]]"
          rollers="{{roll_statuses}}"
          on-update="_handleAutoRollUpdate"
          >
        </autoroll-widget-sk>
      </div>

      <div class="container" navigation>
        <h2>Perf</h2>
        <perf-status-sk title="Active Perf alerts" reload="[[reload]]"></perf-status-sk>
      </div>

      <div class="container" navigation>
        <h2>Gold</h2>
        <gold-status-sk title="Skia Gold: Untriaged image count" reload="[[reload]]"></gold-status-sk>
      </div>

      <div class="container" navigation>
        <h2>Fuzzer</h2>
        <fuzzer-widget-sk title="Skia Fuzzer: fuzz counts" reload="[[reload]]"></fuzzer-widget-sk>
      </div>

      <div class="container" navigation>
        <h2>Rotations</h2>
        <div>
          <a href="http://skia-tree-status.appspot.com/sheriff" target="_blank" rel="noopener noreferrer">
            <paper-item id="sheriff-button" title="The current Skia sheriff">
              <iron-icon icon="icons:star"></iron-icon>
              Sheriff: [[sheriff]]
            </paper-item>
          </a>
        </div>
        <div>
          <a href="http://skia-tree-status.appspot.com/gpu-sheriff" target="_blank" rel="noopener noreferrer">
            <paper-item id="wrangler-button" title="The current GPU wranger">
              <iron-icon icon="icons:gesture"></iron-icon>
              Wrangler: [[wrangler]]
            </paper-item>
          </a>
        </div>
        <div>
          <a href="http://skia-tree-status.appspot.com/robocop" target="_blank" rel="noopener noreferrer">
            <paper-item id="robocop-button" title="The current Android robocop">
              <iron-icon icon="icons:android"></iron-icon>
              Robocop: [[robocop]]
            </paper-item>
          </a>
        </div>
        <div>
          <a href="http://skia-tree-status.appspot.com/trooper" target="_blank" rel="noopener noreferrer">
            <paper-item id="trooper-button" title="The current Infra trooper">
              <iron-icon icon="skia:trooper"></iron-icon>
              Trooper: [[trooper]]
            </paper-item>
          </a>
        </div>
      </div>

      <h1 class="shrinkable" toolbar>
        <template is="dom-if" if="[[!narrow]]">Status: </template>[[repo]]
      </h1>

      <tree-status-sk mtoolbar
        class="horizontal layout center flex"
        reload="[[reload]]"
        open="{{open}}"
        sheriff="{{sheriff}}"
        wrangler="{{wrangler}}"
        robocop="{{robocop}}"
        trooper="{{trooper}}">
      </tree-status-sk>

      <div id="mainContent" class="horizontal layout">
        <commits-canvas-sk id="can"
          roll_statuses="[[roll_statuses]]"
          branch_heads="[[branch_heads]]"
          commits="[[commits]]"
          repo_base="[[repo_base]]"
          commits_to_load="{{commits_to_load}}"
          reload="{{reload}}">
        </commits-canvas-sk>

        <commits-table-sk id="table" class="flex"
            task_specs="[[task_specs]]"
            tasks="[[tasks]]"
            categories="[[categories]]"
            category_list="[[category_list]]"
            task_details="[[task_details]]"
            commits="[[commits]]"
            commits_map="[[commits_map]]"
            logged_in="[[logged_in]]"
            purple_tasks="[[purple_tasks]]"
            relanded_map="[[relanded_map]]"
            repo="[[repo]]"
            repo_base="[[repo_base]]"
            reverted_map="[[reverted_map]]"
            swarming_url="[[swarming_url]]"
            task_scheduler_url="[[task_scheduler_url]]"
            time_points="[[time_points]]"
            commit_label="{{label}}"
            drawing="{{drawing}}"
            filter="{{filter}}"
            search="{{search}}"
            on-reload="_forceUpdate">
        </commits-table-sk>

        <commits-data-sk id="data"
            roll_statuses="[[roll_statuses]]"
            commits_to_load="[[commits_to_load]]"
            filter="[[filter]]"
            is_sheriff="[[is_sheriff]]"
            is_trooper="[[is_trooper]]"
            reload="[[reload]]"
            repo="[[repo]]"
            search="[[search]]"
            branch_heads="{{branch_heads}}"
            task_details="{{task_details}}"
            task_specs="{{task_specs}}"
            tasks="{{tasks}}"
            categories="{{categories}}"
            category_list="{{category_list}}"
            commits="{{commits}}"
            commits_map="{{commits_map}}"
            loading="{{loading}}"
            purple_tasks="{{purple_tasks}}"
            relanded_map="{{relanded_map}}"
            reverted_map="{{reverted_map}}"
            swarming_url="{{swarming_url}}"
            task_scheduler_url="{{task_scheduler_url}}"
            time_points="{{time_points}}">
        </commits-data-sk>

        <paper-spinner id="spinner" alt="Loading status table and drawing it" active="{{_or(drawing, loading)}}"></paper-spinner>
      </div>
    </app-sk>
  </template>
  <script>
  Polymer({
    is:"status-sk",

    properties: {
      // input
      commits_to_load: {
        type: Number,
        value: 35,
      },
      repo: {
        type: String,
      },
      repo_base: {
        type: String,
      },
      repos: {
        type: Array,
        value: function() {
          return ["Skia", "Skia Infra"];
        },
      },

      // private
      drawing: {
        type: Boolean,
        value: false,
      },
      email: {
        type: String,
      },
      loading: {
        type: Boolean,
        value: false,
      },
      logged_in: {
        type: Boolean,
        computed: "_editRights(email, login_data)",
      },
      is_sheriff: {
        type: Boolean,
        computed: "_isUser(email, sheriff)",
      },
      is_trooper: {
        type: Boolean,
        computed: "_isUser(email, trooper)",
      },
      login_data: { 
        type: Object,
      },
      narrow: {
        type: Boolean,
        observer: "_toggleLargeMenuItems"
      },
      open: {
        type: Boolean,
        observer: "_treeOpen",
      },
      sheriff: {
        type: String,
      },
      wrangler: {
        type: String,
      },
      robocop: {
        type: String,
      },
      trooper: {
        type: String,
      },
    },

    _forceUpdate: function() {
      this.$.data.forceUpdate();
    },

    _editRights: function(email, login_data) {
      return login_data["editRights"] === true
    },

    _isUser: function(email, user) {
      var parts = email.split('@');
      if (parts.length !== 2) {
          return false;
      }
      return parts[0] === user;
    },

    _or: function(a, b) {
      return a || b;
    },

    _toggleLargeMenuItems: function(isNarrow) {
      var items = $$(".shrinkable", this.$.app);
      items.forEach(function(a){
        if (isNarrow) {
          a.classList.add("shrunk");
        } else {
          a.classList.remove("shrunk");
        }
      });
    },

    _treeOpen: function(open) {
      // updateStyles must be called after setting these to make sure they
      // propagate through all the children.
      if (open === "open") {
        this.customStyle["--status-sk-header-text-color"] = "white";
        this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-lightgreen");
      } else if (open === "caution") {
        this.customStyle["--status-sk-header-text-color"] = "black";
        this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-lightorange");
      } else {
        this.customStyle["--status-sk-header-text-color"] = "white";
        this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-redorange");
      }
      Polymer.updateStyles();

      // Set the favicon.
      var link = document.createElement("link");
      link.id = "dynamicFavicon";
      link.rel = "shortcut icon";
      if (open === "open") {
        link.href = "/res/img/favicon-open.ico";
      } else if (open === "caution") {
        link.href = "/res/img/favicon-caution.ico";
      } else {
        link.href = "/res/img/favicon-closed.ico";
      }

      var head = document.getElementsByTagName("head")[0];
      var oldIcon = document.getElementById(link.id);
      if (oldIcon) {
        head.removeChild(oldIcon);
      }
      head.appendChild(link);
    },

    _handleAutoRollUpdate: function() {
      this.$.data.forceReProcess();
    },
  });
  </script>
</dom-module>