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

    <word-cloud2-sk>

  Methods:
    None.

  Properties:
    items - A serialized map[string][]types.ValueWeight representing the
      weights of all the parameter values, grouped by parameter key. Presumes
      the ValueWeights are provided in descending order.

      For example:

        {
          "cpu_or_gpu": [
            {"value":"CPU","weight":19},
            {"value":"GPU","weight":7},
          ],
          "config": [
            ...
          ],
          ...
        }

  Events:
      None.

-->
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="word-cloud2-sk">
  <style include="iron-flex iron-flex-alignment">
    .param {
      margin:  0.6em;
      border:  solid #eee 1px;
      padding: 0.6em;
    }

    .item {
      margin: 0.6em;
    }
  </style>
  <template>
    <div class="layout horizontal wrap">
      <template is="dom-repeat" items="[[_items]]" as="item">
        <div class=item><h3>[[item.name]]</h3>
          <div class="param layout vertical">
            <template is="dom-repeat" items="[[item.values]]" as="entry">
              <div style$="[[computeStyle(entry)]]">[[entry.value]]</div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'word-cloud2-sk',

    properties: {
      items: {
        type: Object,
        value: function() { return {}; },
        observer: "_itemsChange",
      },
      _items: {
        type: Array,
        value: function() { return []; },
      },
    },

    ready: function () {
      this._items = [];
    },

    _itemsChange: function() {
      // Convert map[string][]types.ValueWeight to an Array so it can be
      // processed by polymer templating.
      var ar = [];
      Object.keys(this.items).forEach(function(key) {
        ar.push({
          name: key,
          values: this.items[key],
        });
      }.bind(this));
      ar.sort(function(a,b) {
        if (a.values[0].weight > b.values[0].weight) {
          return -1;
        }
        if (a.values[0].weight < b.values[0].weight) {
          return 1;
        }
        return a.name.localeCompare(b.name);
      });

      this._items = ar;
    },

    computeStyle: function (entry) {
      return 'font-size: ' + entry.weight + 'px;';
    },
  });
</script>