<!DOCTYPE html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/components/core-icon-button/core-icon-button.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-progress/paper-progress.html">

<link rel="import" href="/dashboard/elements/autocomplete-box.html">
<link rel="import" href="/dashboard/static/simple_xhr.html">
<link rel="import" href="/dashboard/static/testselection.html">

<polymer-element name="test-picker" attributes="hasChart xsrfToken testSuites">
  <template>
    <style>
      #container * {
        margin-right: 3px;
      }

      #dnd-btn {
        padding: 1px 2px;
        margin: 2px 4px 2px 2px;
        font-size: 11px;
        cursor:grabbing;
        cursor:-moz-grabbing;
        cursor:-webkit-grabbing;
      }

      paper-button {
        height: 35px;
      }

      paper-button:not([disabled]) {
        color: #4285f4;
      }

      paper-button[raised]:not([disabled]) {
        background: #4285f4;
        color: #fff;
      }

      core-icon {
        height: 25px;
      }

      #suite-description {
        padding: 10px;
      }

      #loading {
        display: block;
        position: relative;
        width: 152px;
        height: 35px;
      }

      paper-progress {
        display: block;
        position: absolute;
        bottom: -1px;
        height: 1px;
        width: 100%;
      }
    </style>

    <div id="container" horizontal layout center wrap>
      <template repeat="{{box, index in selectionModels}}">
        <autocomplete-box datalist={{box.datalist}}
                          placeholder="{{box.placeholder}}"
                          disabled={{box.disabled}}
                          multi={{box.multi}}
                          on-dropdownselect="{{onDropdownSelect}}"
                          id="selection-{{index}}"></autocomplete-box>
      </template>

      <template if="{{loading}}">
        <div id="loading">
          <paper-progress indeterminate></paper-progress>
        </div>
      </template>

      <core-icon-button id="dnd-btn"
                        icon="open-with"
                        disabled?="{{!enableAddSeries || !hasChart}}"
                        draggable="{{enableAddSeries && hasChart}}"
                        on-dragstart="{{onSeriesButtonDragStart}}">
        Drag me
      </core-icon-button>

      <paper-button raised
                    id="add-graph-btn"
                    on-click="{{onAddButtonClicked}}"
                    disabled?="{{!enableAddSeries}}">Add</paper-button>
    </div>

    <div id="suite-description"></div>
  </template>

  <script>
    'use strict';

    Polymer('test-picker', {

      TESTSUITE_LABEL: 'Test suite',
      BOT_LABEL: 'Bot',
      SUBTEST_LABEL: 'Subtest',
      DEPRECATED_TAG: 'no new data',
      UNMONITORED_TAG: 'unmonitored',

      ready: function() {
        this.pageStateLoading = true;
        this.hasChart = false;
        this.enableAddSeries = false;
        this.selectedSuite = null;
        this.suiteDescription = null;
        this.selectionModels = [
          {
            placeholder: this.TESTSUITE_LABEL,
            datalist: this.getSuiteItems()
          },
          {
            placeholder: this.BOT_LABEL,
            disabled: true,
            multi: true
          }
        ];
      },

      testSuitesChanged: function() {
        this.selectionModels[0].datalist = this.getSuiteItems();
        this.getSelectionMenu(0).setDataList(this.selectionModels[0].datalist);
      },

      /**
       * Gets a list of menu items for test suites.
       */
      getSuiteItems: function() {
        var suiteMenuItems = [];
        var self = this;
        var isUnmonitored = function(suite) {
          // A suite is considered unmonitored if there are no monitored
          // subtests.
          var suiteInfo = self.testSuites[suite];
          return !suiteInfo['mon'] || suiteInfo['mon'].length == 0;
        };

        for (var suite in this.testSuites) {
          var suiteItem = {
            name: suite
          };

          var tags = [];
          if (this.testSuites[suite]['dep']) {
            suiteItem.deprecated = true;
            tags.push(this.DEPRECATED_TAG);
          }
          if (isUnmonitored(suite)) {
            suiteItem.unmonitored = true;
            tags.push(this.UNMONITORED_TAG);
          }
          suiteItem.tag = tags.join(' ');

          suiteMenuItems.push(suiteItem);
        }
        suiteMenuItems.sort(this.compareTestSuiteItem);
        return suiteMenuItems;
      },

      /**
       * Gets a list of bot menu items base on the selected test suite.
       */
      getBotItems: function() {
        var suite = this.getSelectionMenu(0).value;
        if (!this.testSuites[suite]) {
          return [];
        }
        var dict = this.testSuites[suite]['mas'];
        var botMenuItems = [];
        var masters = Object.keys(dict).sort();
        for (var i = 0; i < masters.length; i++) {
          var groupItem = {
            name: masters[i],
            suite: suite,
            head: true
          };
          botMenuItems.push(groupItem);
          var bots = dict[masters[i]];
          var botNames = Object.keys(dict[masters[i]]).sort();
          for (var j = 0; j < botNames.length; j++) {
            var name = botNames[j];
            var botItem = {
              name: name,
              group: masters[i],
              tag: (bots[name] ? this.DEPRECATED_TAG : '')
            };
            botMenuItems.push(botItem);
          }
        }
        return botMenuItems;
      },

      /**
       * Handles dropdown menu select; updates the subsequent menu accordingly.
       */
      onDropdownSelect: function(event) {
        var model = event.target.templateInstance.model;
        var boxIndex = model.index;
        if (boxIndex == 0) {
          this.updateTestSuiteDescription();
          this.updateBotMenu();
        } else if (boxIndex == 1) {
          this.sendSubtestRequest();
        } else {
          // Update all the next dropdown menus for subtests.
          this.updateSubtestMenus(boxIndex + 1);
        }
      },

      updateTestSuiteDescription: function() {
        // Display the test suite description if there is one.
        var descriptionElement = this.$['suite-description'];
        var suite = this.getSelectionMenu(0).value;
        if (!suite || !this.testSuites[suite]) {
          descriptionElement.innerHTML = '';
          return;
        }

        var description = this.testSuites[suite]['des'];
        if (description) {
          var descriptionHTML = '<b>' + suite + '</b>: ';
          descriptionHTML += this.convertMarkdownLinks(description);
          descriptionElement.innerHTML = descriptionHTML;
        } else {
          descriptionElement.innerHTML = '';
        }
      },

      /**
       * Updates bot dropdown menu with bot items.
       */
      updateBotMenu: function() {
        var menu = this.getSelectionMenu(1);
        var botItems = this.getBotItems();
        menu.setDataList(botItems);
        menu.disabled = false;
        this.subtestDict = null;
        // If there's a selection, send a subtest request.
        if (menu.value && menu.value.length > 0) {
          this.sendSubtestRequest();
        } else {
          // Clear all subtest menus.
          this.selectionModels.splice(2);
        }
        this.updateAddButtonState();
      },

      /**
       * Sends a request for subtestDict base on selected test suite and bots.
       */
      sendSubtestRequest: function() {
        if (this.subtestXhr) {
          this.subtestXhr.abort();
          this.subtestXhr = null;
        }
        var bots = this.getCheckedBots();
        // If no bots are selected, just leave the current subtests.
        if (bots.length == 0) {
          return;
        }
        var suite = this.getCheckedSuite();
        if (!suite) {
          return;
        }

        this.loading = true;

        var params = {
          type: 'sub_tests',
          suite: suite,
          bots: bots.join(','),
          xsrf_token: this.xsrfToken
        };
        this.subtestXhr = simple_xhr.send(
            '/list_tests',
            params,
            function(response) {
              this.loading = false;
              this.subtestDict = response;
              // Start at first subtest menu.
              this.updateSubtestMenus(2);
            }.bind(this),
            function(error) {
              if (error) {
                console.log('Error from sendSubtestRequest.');
              }
              this.loading = false;
            }.bind(this)
        );
      },

      /**
       * Updates all subtest menus starting at 'startIndex'.
       */
      updateSubtestMenus: function(startIndex) {
        var subtestDict = this.getSubtestAtIndex(startIndex);

        // Update existing subtest menu.
        for (var i = startIndex; i < this.selectionModels.length; i++) {
          // Remove the rest of the menu if no subtestDict.
          if (!subtestDict || Object.keys(subtestDict).length == 0) {
            this.selectionModels.splice(i);
            this.updateAddButtonState();
            return;
          }
          var subtestItems = this.getSubtestItems(subtestDict);
          var menu = this.getSelectionMenu(i);
          menu.setDataList(subtestItems);

          // If there are selected item, update next menu.
          if (menu.value && menu.value.length > 0) {
            subtestDict = subtestDict[menu.value]['sub_tests'];
          } else {
            subtestDict = null;
          }
        }

        // Check if we still need to add a subtest menu.
        if (subtestDict && Object.keys(subtestDict).length > 0) {
          var subtestItems = this.getSubtestItems(subtestDict);
          this.selectionModels.push({
            placeholder: this.SUBTEST_LABEL,
            datalist: subtestItems
          });
        }

        this.updateAddButtonState();
      },

      updateAddButtonState: function() {
        var selection = this.getCurrentSelection();
        this.enableAddSeries = selection != null && selection.isValid();
      },

      getSubtestAtIndex: function(index) {
        var subtestDict = this.subtestDict;
        for (var i = 2; i < index; i++) {
          var test = this.getSelectionMenu(i).value;
          if (test in subtestDict) {
            subtestDict = subtestDict[test]['sub_tests'];
          } else {
            return null;
          }
        }
        return subtestDict;
      },

      getSubtestItems: function(subtestDict) {
        var subtestItems = [];
        var subtestNames = Object.keys(subtestDict).sort();
        for (var i = 0; i < subtestNames.length; i++) {
          var name = subtestNames[i];
          subtestItems.push({
            name: name,
            tag: (subtestDict[name]['deprecated'] ? this.DEPRECATED_TAG : '')
          });
        }
        return subtestItems;
      },

      getCheckedBots: function() {
        var bots = [];
        var botMenu = this.getSelectionMenu(1);
        var botItems = botMenu.getSelectedItems();
        for (var i = 0; i < botItems.length; i++) {
          bots.push(botItems[i]['group'] + '/' + botItems[i]['name']);
        }
        return bots;
      },

      getCheckedSuite: function() {
        var suiteMenu = this.getSelectionMenu(0);
        return suiteMenu.value;
      },

      getSelectionMenu: function(index) {
        return this.$.container.querySelector('#selection-' + index);
      },

      /**
       * Handler for drag start event for series drag button.
       */
      onSeriesButtonDragStart: function(event, detail, sender) {
        var selection = this.getCurrentSelection();
        var testPathAndSelected = selection.getTestPathAndSelectedSeries();
        event.dataTransfer.setData('type', 'seriesdnd');
        event.dataTransfer.setData(
            'data', JSON.stringify(testPathAndSelected));
        event.dataTransfer.effectAllowed = 'copy';
      },

      /**
       * Fires add event on 'Add' button clicked.
       */
      onAddButtonClicked: function(event, detail, sender) {
        this.fire('add');
      },

      /**
       * Gets the current selection from the menus. Returns null unless there
       * are valid test selection.
       */
      getCurrentSelection: function() {
        // Up to subtest menu.
        for (var i = 0; i < 3; i++) {
          var menu = this.getSelectionMenu(i);
          if (!menu || menu.getSelectedItems().length == 0) {
            return null;
          }
        }

        var suite = this.getSelectionMenu(0).getSelectedItems()[0];
        var selection = new testselection.TestSelection(this.testSuites);
        var testPathAndSelected = this.addTestPathFromSubtestDict(
            this.subtestDict, suite.name, 2);
        var bots = this.getCheckedBots();
        for (var i = 0; i < bots.length; i++) {
          for (var j = 0; j < testPathAndSelected.length; j++) {
            var fullTestPath = bots[i] + '/' + testPathAndSelected[j][0];
            selection.addTestPath(fullTestPath, testPathAndSelected[j][1]);
          }
        }

        return selection;
      },

      /**
       * This method recursively add test path from a subtestDict.  Selected
       * series are added at the last level of the menu.
       * @return {Array} List of pair of test path to list of selected series
       *     name.
       */
      addTestPathFromSubtestDict: function(subtestDict, testPath, level) {
        if (!subtestDict) {
          return [];
        }
        var testPathAndSelected = [];
        var nextMenu = this.getSelectionMenu(level + 1);
        // If this is the last menu with selection.
        var isLastLevel = (level == this.selectionModels.length - 1 ||
                           !nextMenu ||
                           nextMenu.getSelectedItems().length == 0);

        var items = this.getSelectionMenu(level).getSelectedItems();
        for (var i = 0; i < items.length; i++) {
          var name = items[i].name;
          var nextTestPath = testPath + '/' + name;
          var selectedSeries = [];
          if (isLastLevel) {
            if (subtestDict[name]['has_rows']) {
              selectedSeries.push(name);
            }
            // Select important traces by default.
            var nextSubtestDict = subtestDict[name]['sub_tests'];
            for (var subName in nextSubtestDict) {
              if (nextSubtestDict[subName]['has_rows'] &&
                  testselection.isImportant(nextTestPath + '/' + subName)) {
                selectedSeries.push(subName);
              }
            }
            testPathAndSelected.push([nextTestPath, selectedSeries]);
          } else {
            var results = this.addTestPathFromSubtestDict(
                subtestDict[name]['sub_tests'], nextTestPath, level + 1);
            testPathAndSelected.push.apply(testPathAndSelected, results);
          }
        }
        return testPathAndSelected;
      },

      /**
       * Sorts by suite items by deprecated, monitored and then by name.
       * @return {number} negative if suiteA should be before suiteB,
       *     positive if suiteA should be after suiteB, zero if they're equal.
       */
      compareTestSuiteItem: function(suiteA, suiteB) {
        if (!suiteA.deprecated && suiteB.deprecated) {
          return -1;
        }
        if (!suiteB.deprecated && suiteA.deprecated) {
          return 1;
        }
        if (!suiteA.unmonitored && suiteB.unmonitored) {
          return -1;
        }
        if (!suiteB.unmonitored && suiteA.unmonitored) {
          return 1;
        }
        var nameALower = suiteA.name.toLowerCase();
        var nameBLower = suiteB.name.toLowerCase();
        if (nameALower > nameBLower) {
          return 1;
        }
        if (nameALower < nameBLower) {
          return -1;
        }
        return 0;
      },

      /**
       * Converts a link in markdown format to a HTML link (anchor elements).
       * @param {string} text A link in markdown format.
       * @return {string} A hyperlink string.
       */
      convertMarkdownLinks: function(text) {
        return text.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
      }
    });
  </script>
</polymer-element>