<!--
  The <capture-skps-sk> custom element declaration. Displays a form that allows the user to
  queue a task to capture SKPs.

  Attributes:
    pageSets: List of all defined page sets, as accepted by page-set-selector-sk property
      pageSets. Must be set.
    chromiumBuilds: List of all supported Chromium builds, as accepted by chromium-build-selector-sk
      attribute chromiumBuilds. Must be set.

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="capture-skps-sk">
  <style>
    .iron-selected {
      background-color: #D6ECF2;
    }

    .triggering-spinner {
      margin: auto;
      vertical-align: middle;
    }

    table.options td {
      padding: 1em 2em;
    }

    td.center {
      text-align:center;
      padding-top:2em;
    }

    .panel {
      @apply(--shadow-elevation-2dp);
    }
  </style>
  <template>

    <confirm-dialog-sk id="confirm_dialog"></confirm-dialog-sk>

    <table class="options panel">
      <tr>
        <td>PageSets Type</td>
        <td>
          <page-set-selector-sk id="page_sets" page-sets="{{pageSets}}"></page-set-selector-sk>
        </td>
      </tr>

      <tr>
        <td>Chromium Build</td>
        <td>
          <chromium-build-selector-sk id="chromium_build"
                                      chromium-builds="{{chromiumBuilds}}">
          </chromium-build-selector-sk>
        </td>
      </tr>

      <tr>
        <td>Repeat this task</td>
        <td>
          <repeat-after-days-sk id="repeat_after_days"></repeat-after-days-sk>
        </td>
      </tr>

      <tr>
        <td>Description</td>
        <td>
          <paper-input value="" id="desc"
                       label="Description is required. Please include SKP version."></paper-input>
        </td>
      </tr>

      <tr>
        <td colspan="2" class="center">
          <div class="triggering-spinner">
            <paper-spinner active="[[ triggeringTask ]]" alt="Trigger task"></paper-spinner>
          </div>
          <paper-button raised id="submit_task" disabled="[[ triggeringTask ]]">Queue Task</paper-button>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="view_history">View runs history</paper-button>
        </td>
      </tr>
    </table>
  </template>
</dom-module>

<script>
  Polymer({
    is: "capture-skps-sk",
    properties: {
      pageSets: {
        type: Array,
        observer: "pageSetsChanged",
      },
      chromiumBuilds: {
        type: Array,
        observer: "chromiumBuildsChanged"
      },
      triggeringTask: {
        type: Boolean,
        value: false,
      },
    },

    ready: function() {
      var that = this;
      this.$.submit_task.addEventListener('click', function(e) {
        that.validateTask();
      });
      this.$.view_history.addEventListener('click', function(e) {
        that.gotoRunsHistory();
      });
    },

    pageSetsChanged: function(newValue, oldValue) {
      // Capture SKPs does not support 1M anymore.
      for (var i=this.pageSets.length-1; i>=0; i--) {
         if (ctfe.pageSets.getKey(this.pageSets[i]) == "All") {
           this.pageSets.splice(i, 1);
         }
       }
      if (!oldValue || oldValue.length == 0) {
        this.$.page_sets.selectFirst();
      }
    },

    chromiumBuildsChanged: function(newValue, oldValue) {
      if (!oldValue || oldValue.length == 0) {
        this.$.chromium_build.selectFirst();
      }
    },

    validateTask: function() {
      if (!this.$.page_sets.selected) {
        sk.errorMessage("Please select a page set type");
        this.$.page_sets.focus();
        return;
      }
      if (!this.$.chromium_build.selected) {
        sk.errorMessage("Please select a Chromium build");
        this.$.chromium_build.focus();
        return;
      }
      if (!this.$.desc.value) {
        sk.errorMessage("Please specify a description");
        this.$.desc.focus();
        return;
      }
      if (ctfe.moreThanThreeActiveTasks($$$("drawer-sk").sizeOfUserQueue)) {
        return;
      }
      this.$.confirm_dialog.open("Proceed with queueing task?")
        .then(this.queueTask.bind(this))
        .catch(function() {
          sk.errorMessage("Did not queue");
        })
    },

    queueTask: function() {
      this.triggeringTask = true;
      var params = {};
      params["page_sets"] = this.$.page_sets.selected;
      params["chromium_build"] = this.$.chromium_build.selected;
      params["desc"] = this.$.desc.value;
      params["repeat_after_days"] = this.$.repeat_after_days.selected;

      sk.post("/_/add_capture_skps_task", JSON.stringify(params))
        .then(function(resp) {
          this.gotoRunsHistory();
        }.bind(this)).catch(function(e) {
          this.triggeringTask = false;
          sk.errorMessage(e);
        }.bind(this));
    },

    gotoRunsHistory: function() {
      window.location.href = "/capture_skp_runs/";
    },
  });
</script>