<!--
  The res/js/status.js file must be included before this file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <commits-table-sk>

  This element renders the status table.  It includes a UI to filter the table by task spec group
  (e.g. Interesting, Comments, etc), a UI to type in a search term to filter the task specs by, and
  a way to change if the author name or commit subject should be displayed.  It is important
  to note that the filtering of the data does not happen here, it happens in commits-data-sk.

  To use this file import it:

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

  Usage:

    <commits-table-sk></commits-table-sk>

  Properties:
    // inputs
    task_details: Object, a map of commit hash to an object that has the task results by task spec.
    task_specs: Object, a map of the task spec names to an object that has, among other things, category, subcategory, comments and master.
    tasks: Object, a map of the task spec names to an object that maps task numbers to task results.
    categories: Object, a map of the task spec categories to an object that has the subcategories and the colspan (total number of included task specs).
    category_list: Array<String>, an array of the task spec category names.
    commits: Array<Object>, the commit objects, in chronological detail.
    commits_map: Object, a map of commit hash to commit objects.
    logged_in: Boolean, if the links should be for internal or external pages.
    relanded_map: Object, a map of a commit hash that was relanded to the commit hash that relands it.
    repo: String, the current repo.  Used to direct comments to the right place.
    repo_base: The base URL for commits. Commit hashes will be appended to this.
    reverted_map: Object, a map of a commit hash that was reverted to the commit hash that relands it.
    swarming_url: String, the URL of the Swarming server.
    task_scheduler_url: String, the URL of the Task Scheduler.

    // outputs
    commit_label: String, "author" or "subject", which indicates what info should be displayed about a commit.
    drawing: Boolean, if the table is being drawn.
    filter: String, the task spec filter to be used.
    search: String, the string to be used if filter is "search".

  Methods:
    None.

  Events:
    None.
-->
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/communication-icons.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/image-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="/res/imp/bower_components/paper-radio-button/paper-radio-button.html">


<link rel="import" href="/res/common/imp/confirm-dialog-sk.html">

<link rel="import" href="commits-table-d3-sk.html">

<dom-module id="commits-table-sk">
  <template>
    <style include="iron-flex iron-flex-alignment iron-positioning">
      .filters{
        font-size: .75em;
        height: 50px;
        min-width: 950px;
        max-width: 1250px;
      }
      div.tooltip {
        padding-right: 12px;
        display:inline-block;
      }

      #taskSpecTextFilter {
        max-width:144px;
        display:inline-block;
        --paper-input-container-label: {
          font-size:0.75em;
        };
      }

      /* Depending on if the subject or author is being shown, we may need more or less space.*/
      #filterSelector.near {
        margin-left: 40px;
      }

      #filterSelector.far {
        margin-left: 380px;
      }

      .helpicon {
        width: 12px;
        height: 12px;
        vertical-align: top;
      }

      paper-radio-group {
        --paper-radio-group-item-padding: 2px;
      }

      :host {
        /* prevent the comments-sk from making the popup super wide or super narrow*/
        --comments-sk-style: {
            max-width: 1200px;
            min-width: 300px;
          };
      }

      a.nodecorate {
        color: #000000;
        text-decoration: none;
      }
    </style>

    <confirm-dialog-sk id="confirm_dialog"></confirm-dialog-sk>
    <div>
      <div id="filterWrapper">
        <div class="filters horizontal layout center">
          <paper-radio-group id="commitLabelSelector" selected="{{commit_label}}">
            <template is="dom-repeat" items="{{_commit_labels}}" as="label">
              <paper-radio-button name="{{label}}">{{_getPrettyCommitLabel(label)}}</paper-radio-button><br/>
            </template>
          </paper-radio-group>

          <paper-radio-group id="filterSelector" class$="{{_getLeftAlign(commit_label)}} horizontal layout center" selected="{{filter}}">
            <template is="dom-repeat" items="{{_short_filters}}" as="filter">
              <paper-radio-button name="{{filter}}">{{_getPrettyFilterLabel(filter)}}</paper-radio-button>
              <div class="tooltip" title$="{{_getPrettyFilterText(filter)}}">
                <iron-icon icon="icons:help" class="helpicon"></iron-icon>
              </div>
            </template>
            <paper-radio-button name="search"></paper-radio-button>
          </paper-radio-group>
          <paper-input
              id="taskSpecTextFilter"
              value="{{_searchVal}}"
              label="Filter task spec"
              on-change="_setFilterToSearch"
              no-label-float>
          </paper-input>
          <div class="tooltip" title$="{{_getPrettyFilterText('search')}}">
            <iron-icon icon="icons:help" class="helpicon"></iron-icon>
          </div>
          <a href$="{{_trigger_job_url}}" target="_blank" class="nodecorate" rel="noopener">
            <paper-button raised>
              <iron-icon icon="icons:add"></iron-icon>
              Trigger a Job
            </paper-button>
          </a>
          <a href$="{{_rerun_purple_url}}" target="_blank" class="nodecorate" rel="noopener">
            <paper-button raised>
              <iron-icon icon="icons:autorenew"></iron-icon>
              Re-Run Purple Jobs
            </paper-button>
          </a>
        </div>
      </div>

      <commits-table-d3-sk
          task_specs="[[task_specs]]"
          tasks="[[tasks]]"
          categories="[[categories]]"
          category_list="[[category_list]]"
          task_details="[[task_details]]"
          commit_label="[[commit_label]]"
          commits="[[commits]]"
          commits_map="[[commits_map]]"
          logged_in="[[logged_in]]"
          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]]"

          drawing="{{drawing}}">
      </commits-table-d3-sk>
    </div>

  </template>
  <script>
  (function(){
    var PRETTY_COMMIT_LABELS = {
      "author": "Author",
      "subject": "Subject",
    };

    var PRETTY_FILTER_LABELS = {
      "interesting": ["Interesting", "Bots which have both successes and failures within the visible commit window."],
      "failures": ["Failures", "Bots which have failures within the visible commit window."],
      "comments": ["Comments", "Bots which have comments."],
      "nocomment": ["Failing w/o comment", "Bots which have failures within the visible commit window but have no comments."],
      "all": ["All", "Display all bots."],
      "search": [" ", "Enter a search string. Substrings and regular expressions may be used, per the Javascript String match() rules."],
    };

    Polymer({
      is: "commits-table-sk",

      properties: {
        // inputs from data source to render.
        task_specs: {
          type: Object,
        },
        categories: {
          type: Object,
        },
        category_list: {
          type: Array,
        },
        task_details: {
          type: Object,
        },
        tasks: {
          type: Object,
        },
        commits: {
          type: Array,
        },
        commits_map: {
          type: Object,
        },
        logged_in: {
          type: Boolean,
        },
        purple_tasks: {
          type: Array,
        },
        relanded_map: {
          type: Object,
        },
        repo: {
          type: String,
        },
        repo_base: {
          type: String,
        },
        reverted_map: {
          type: Object,
        },
        swarming_url: {
          type: String,
        },
        task_scheduler_url: {
          type: String,
        },
        time_points: {
          type: Object,
        },

        // outputs (from UI elements)
        commit_label: {
          type: String,
          notify:true,
        },
        drawing: {
          type: Boolean,
          notify: true,
        },
        filter: {
          type: String,
          notify: true,
        },
        search: {
          type: String,
          notify:true,
        },

        // private
        _commit_labels: {
          type: Array,
          value: function(){
            return ["author", "subject"];
          }
        },
        _rerun_purple_url: {
          type: String,
          computed: "_getRerunJobsUrl(task_scheduler_url, purple_tasks)",
        },
        _searchVal: {
          type: String,
          value: "",
        },
        _short_filters: {
          type: Array,
          value: function(){
            // "search" is omitted because it is drawn seperately, being a paper-input and all.
            return ["interesting","failures","comments","nocomment","all"];
          }
        },
        _trigger_job_url: {
          type: String,
          computed: "_getTriggerJobUrl(task_scheduler_url)",
        },
        _triggered_jobs: {
          type: Array,
          value: function() {
            return [];
          },
        },
      },

      _getPrettyCommitLabel: function(key) {
        return PRETTY_COMMIT_LABELS[key];
      },
      _getPrettyFilterLabel: function(key) {
        // index 0 is the short name, index 1 is the description
        return PRETTY_FILTER_LABELS[key][0];
      },
      _getPrettyFilterText: function(key) {
        // index 0 is the short name, index 1 is the description
        return PRETTY_FILTER_LABELS[key][1];
      },
      _getTriggerJobUrl: function() {
        return this.task_scheduler_url + "/trigger";
      },

      _getRerunJobsUrl: function() {
        var url = this.task_scheduler_url + "/trigger";
        for (var i = 0; i < this.purple_tasks.length; i++) {
          var sep = "&";
          if (i === 0) {
            sep = "?";
          }
          var t = this.purple_tasks[i];
          url += sep + "job=" + t.name + "@" + t.commit;
        }
        return url;
      },

      _setFilterToSearch: function() {
        this.set("filter", "search");
        this.set("search", this._searchVal);
      },

      _getLeftAlign: function(commit_label) {
        if (commit_label == "author") {
          return "near";
        }
        return "far";
      }

    });
  })()
  </script>
</dom-module