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

    <input-list-sk>

  To use this file import it:

    <link href="/res/imp/input-list-sk.html" rel="import" />

  Usage:

    <input-list-sk></input-list-sk>

  Properties:
    autocomplete: Array<String> values for auto-completing.
    heading: String, the heading to display
    values: Array<String> Any typed in values

  Methods:
    None.

  Events:
    None.
-->
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">

<link rel="import" href="/res/common/imp/autocomplete-input-sk.html">
<link rel="import" href="/res/common/imp/url-params-sk.html">

<dom-module id="input-list-sk">
  <template>
    <style>
    #container {
      margin: 5px;
      padding: 10px;
      border: 1px solid #eeeeee;
      font-size: 12px;
    }
    h2 {
      font-size: 16px;
    }
    paper-icon-button {
      width: 30px;
      height: 30px;
    }
    .filter {
      font-style: italic;
    }
    </style>

    <div id="container">
      <h2>{{heading}}</h2>
      <template is="dom-repeat" items="[[values]]" as="value">
        <div class="horizontal layout center">
          <span class="filter flex">{{value}}</span>
          <paper-icon-button icon="clear" value="{{value}}" on-click="_valueDeleted"></paper-icon-button>
        </div>
      </template>
      <autocomplete-input-sk
          autocomplete="[[autocomplete]]"
          id="new"
          on-change="_newValueEntered"
          ></autocomplete-input-sk>
    </div>

  </template>
  <script>
  (function(){
    Polymer({
      is:"input-list-sk",

      properties: {
        autocomplete: {
          type: Array,
        },

        heading: {
          type: String,
        },

        values: {
          type: Array,
          notify: true,
        },
      },

      addValue: function(value) {
        if (!!value && value != "" && this.values.indexOf(value) == -1) {
          if (!this.values) {
            this.set("values", []);
          }
          this.push("values", value);
        }
      },

      deleteValue: function(value) {
        var idx = this.values.indexOf(value);
        if (idx >= 0) {
          this.splice("values", idx, 1);
        }
      },

      _newValueEntered: function() {
        var v = this.$.new.value;
        this.$.new.value = "";
        this.addValue(v);
        this.suggestions = [];
      },

      _valueDeleted: function(e,d,s) {
        var target = e.target;
        var toDelete = target.value || target.parentElement.value;
        this.deleteValue(toDelete);
      }

    });
  })()
  </script>
</dom-module>