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

    <leasing-selections-sk>

  This is the side navigation menu for the Skia Leasing Server

  To use this file import it:

    <link href="leasing-selections-sk.html" rel="import" />

  Usage:

    <leasing-selections-sk></leasing-selections-sk>

  Attributes:
    pool - The Swarming pool.
    osTypes - All available OS types in the above pool.
    deviceTypes - All available device types for the selected OS type.
    osToDeviceTypes - All available device types for all OS types.
    loadingDetails - Whether we are waiting to hear back from the server.
    botId - The bot Id that should be leased. Eg: skia-gce-001.
    taskIdForIsolates - The task Id whose isolates should be kept ready on bot.
    desc - Description of the leasing task.
    duration - How long the bot will be leased for.

  Events:
    None

  Methods:
    None
-->
<link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="/res/imp/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
<link rel="import" href="/res/imp/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/res/common/imp/confirm-dialog-sk.html">

<dom-module id="leasing-selections-sk">
  <style>
    .loading-details-spinner {
      margin: auto;
      vertical-align: middle;
      padding-left: 10em;
    }
    .iron-selected {
      background-color: #D6ECF2;
    }
    .step-title {
      padding-top: 2em;
    }
    .smaller-font {
      font-size: 80%;
    }
    paper-dropdown-menu, paper-listbox {
      width: 350px;
    }
    paper-dropdown-menu {
      margin: auto;
      display: block;
    }
    paper-button {
      color: #1f78b4;
    }
    table.options td {
      text-align: center;
      padding-right: 5em;
      padding-left: 5em;
      padding-bottom: 2em;
    }
    .panel {
      @apply(--shadow-elevation-2dp);
    }
  </style>
  <template>

    <div class="loading-details-spinner">
      <paper-spinner active="[[loadingDetails]]"
                     alt="Loading details"></paper-spinner>
    </div>

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

    <br/><br/>

    <table class="options panel">

      <tr>
        <td class="step-title">Select Pool</td>
        <td>
          <paper-dropdown-menu disabled="[[loadingDetails]]">
            <paper-listbox class="dropdown-content" selected="{{pool}}" id="pool_listbox" attr-for-selected="value">
              <paper-item value="Skia">Skia</paper-item>
              <paper-item value="SkiaCT">SkiaCT</paper-item>
              <paper-item value="SkiaInternal">SkiaInternal</paper-item>
              <paper-item value="CT">CT</paper-item>
              <paper-item value="CTAndroidBuilder">CTAndroidBuilder</paper-item>
              <paper-item value="CTLinuxBuilder">CTLinuxBuilder</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
        </td>
      </tr>

      <tr>
        <td class="step-title">Select OS Type</td>
        <td>
          <paper-dropdown-menu disabled="[[loadingDetails]]" on-iron-select="osSelected">
            <paper-listbox class="dropdown-content" selected="0" id="os_listbox">
              <template is="dom-repeat" items="[[getKeys(osTypes)]]">
                <paper-item value="[[item]]">[[displayOsTypes(item, osTypes)]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </td>
      </tr>

      <tr>
        <td class="step-title">Select Device Type</td>
        <td>
          <paper-dropdown-menu disabled="[[loadingDetails]]" id="device_dropdown_menu">
            <paper-listbox class="dropdown-content" attr-for-selected="value" id="device_listbox" selected="{{selectedDeviceType}}">
              <template is="dom-repeat" items="[[getKeys(deviceTypes)]]">
                <paper-item value="[[item]]">[[displayDeviceTypes(item, deviceTypes)]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </td>
      </tr>

      <tr>
        <td class="step-title">Specify BotId (optional)</td>
        <td>
          <paper-input value="{{botId}}" disabled="[[loadingDetails]]"></paper-input>
          <span class="smaller-font">Note: OS Type and Device Type are ignored if this is populated</span>
        </td>
      </tr>

      <tr>
        <td class="step-title">Specify Swarming Task Id<br/>to keep artifacts ready on bot<br/>(optional)</td>
        <td>
          <paper-input value="{{taskIdForIsolates}}" disabled="[[loadingDetails]]"></paper-input>
        </td>
      </tr>

      <tr>
        <td class="step-title">Lease duration</td>
        <td>
          <paper-dropdown-menu disabled="[[loadingDetails]]">
            <paper-listbox class="dropdown-content" selected="{{duration}}" attr-for-selected="value" id="duration_listbox">
              <paper-item value="1">1hr</paper-item>
              <paper-item value="2">2hr</paper-item>
              <paper-item value="6">6hr</paper-item>
              <paper-item value="23">23hr</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>
        </td>

      <tr>
        <td class="step-title">Description</td>
        <td>
          <paper-input value="{{desc}}" label="Description is required" disabled="[[loadingDetails]]"></paper-input>
        </td>
      </tr>

      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="submit" on-click="onSubmit">Lease Bot</paper-button>
        </td>
      </tr>

    </table>

  </template>
</dom-module>

<script>
   Polymer({
     is: "leasing-selections-sk",
     properties: {
       pool: {
         type: String,
         value: "Skia",
         observer: "poolChanged",
       },
       osTypes: {
         type: Object,
         value: {},
         observer: "osTypesChanged",
       },
       deviceTypes: {
         type: Object,
         value: {},
       },
       selectedDeviceType: {
         type: String,
         value: "",
       },
       osToDeviceTypes: {
         type: Object,
         value: {},
       },
       loadingDetails: {
         type: Boolean,
         value: true,
       },
       botId: {
         type: String,
         value: "",
       },
       taskIdForIsolates: {
         type: String,
         value: "",
       },
       desc: {
         type: String,
         value: "",
       },
       duration: {
         type: String,
         value: "1",
       },
     },

    onSubmit: function() {
      if (!this.validateInputs()) {
        return;
      }

      this.$.confirm_dialog.open("Proceed with adding leasing task?")
          .then(this.addTask.bind(this))
          .catch(function(err) {
            console.log(err);
            sk.errorMessage("Did not add task");
          })

    },

    addTask: function() {
      var params = {};
      params.pool = this.pool;
      params.botId = this.botId;
      if (!this.botId) {
        params.osType = this.$.os_listbox.selectedItem.value;
        if (this.$.device_listbox.selectedItem) {
          params.deviceType = this.$.device_listbox.selectedItem.value;
        }
      }
      params.taskIdForIsolates = this.taskIdForIsolates;
      params.duration = this.duration;
      params.description = this.desc;

      sk.post("/_/add_leasing_task", JSON.stringify(params)).then(function(resp) {
        window.location.href = "/my_leases";
      }).catch(sk.errorMessage);
    },

    validateInputs: function() {
       if (this.loadingDetails) {
         sk.errorMessage("Please wait till pool details complete loading");
         return false;
       }
       if (!this.desc) {
         sk.errorMessage("Please specify a description");
         return false;
       }
       return true;
     },

     osSelected: function(e) {
       if (e.target.selectedItem) {
         this.deviceTypes = {};
         this.selectedDeviceType = '';
         this.$.device_dropdown_menu.disabled = (e.target.selectedItem.value !== "Android" &&
                                                 !e.target.selectedItem.value.startsWith("iOS"));
         if (!this.$.device_dropdown_menu.disabled) {
           this.deviceTypes = this.osToDeviceTypes[e.target.selectedItem.value];
           this.selectedDeviceType = this.getKeys(this.deviceTypes)[0];
         }
       }
     },

     displayOsTypes: function(item, map) {
       return item + this.getCountsStr(item, map);
     },

     displayDeviceTypes: function(item, map) {
       var alias = leasing.alias.device(item);
       // Make the display look similar to the swarming UI page.
       return alias + leasing.alias.getAKAStr(item) + this.getCountsStr(item, map);
     },

     getCountsStr: function(item, map) {
       return ' - ' + map[item] + ' bots online';
     },

     getKeys: function(m) {
       return Object.keys(m);
     },

     poolChanged: function(newValue) {
       this.loadingDetails = true;
       this.osTypes = {};
       this.osToDeviceTypes = {};
       sk.post("/_/pooldetails?pool=" + newValue).then(JSON.parse).then(function(resp) {
         this.osTypes = resp.OsTypes;
         this.osToDeviceTypes = resp.OsToDeviceTypes;
         this.$.os_listbox.selected = 0;
       }.bind(this)).catch(sk.errorMessage);
     },

     osTypesChanged: function(newValue) {
       this.loadingDetails = !Object.keys(newValue).length;
     },
   });
</script>