<!--
  The <admin-tasks-sk> custom element declaration. Displays a form that allows the user to queue
  either a recreate page sets task or recreate webpage archives task.

  Attributes:
    selectedTab: One of "pagesets" or "archives" to control which tab to display initially, default
      "pagesets".
    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="admin-tasks-sk">
  <style>
    paper-tabs {
      background-color: #D6ECF2;
    }

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

    .iron-selected {
      background-color: #D6ECF2;
    }

    .hidden {
      display: none;
    }

    table.options {
      margin: auto
    }

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

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

    .panel {
      @apply(--shadow-elevation-2dp);
      margin-right: 10px
    }
  </style>
  <template>

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

    <div class="panel">
      <paper-tabs id="tabs" attr-for-selected="id" selected="{{selectedTab}}" noink>
        <paper-tab id="pagesets">Recreate Pagesets</paper-tab>
        <paper-tab id="archives">Recreate Webpage Archives</paper-tab>
      </paper-tabs>

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

        <tr id="chromium_build_row" class="hidden">
          <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 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>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "admin-tasks-sk",
    properties: {
      selectedTab: {
        type: String,
        value: "pagesets",
        observer: "tabChanged",
      },
      pageSets: {
        type: Array,
        observer: "pageSetsChanged",
      },
      chromiumBuilds: {
        type: Array,
        observer: "chromiumBuildsChanged",
      },
      triggeringTask: {
        type: Boolean,
        value: false,
      },
    },

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

    tabChanged: function() {
      this.$.chromium_build_row.classList
        .toggle("hidden", this.selectedTab != "archives");
    },

    pageSetsChanged: function(newValue, oldValue) {
      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.selectedTab == "archives") {
        if (!this.$.chromium_build.selected) {
          sk.errorMessage("Please select a Chromium build");
          this.$.chromium_build.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() {
      if (this.selectedTab == "pagesets") {
        this.queuePagesetsTask();
      } else if (this.selectedTab == "archives") {
        this.queueArchivesTask();
      } else {
        sk.errorMessage(new Error("Unknown selectedTab: " + this.selectedTab));
      }
    },

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

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

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

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

    gotoRunsHistory: function() {
      if (this.selectedTab == "pagesets") {
        window.location.href = "/recreate_page_sets_runs/";
      } else if (this.selectedTab == "archives") {
        window.location.href = "/recreate_webpage_archives_runs/";
      } else {
        sk.errorMessage(new Error("Unknown selectedTab: " + this.selectedTab));
      }
    },
  });
</script>