<link rel="import" href="../../../../../third-party/polymer/polymer.html">
<link rel="import" href="../../../../../third-party/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../../../../third-party/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../../../../third-party/paper-radio-group/paper-radio-group.html">
<polymer-element name="p2b-grid-filter-select" attributes="multiple key label" grid-filter expects-grid-state>
  <template>
    <link rel="stylesheet" href="component.css">
    <link rel="stylesheet" href="../common.css">
    <content id="content" select="*"></content>
    <div class="filter-container">
      <h3>{{label}}</h3>
      <template if="{{ multiple }}" bind>
        <core-selector id="multiSelector" multi selectedAttribute="checked" valueattr="value" core-select="{{updateGridState}}" selected="{{ selected }}">
          <template repeat="{{ item in items }}">
            <paper-checkbox value="{{ item.value }}" on-change="{{ updateGridState }}" label="{{ item.label }}"></paper-checkbox>
          </template>
        </core-selector>
      </template>

      <template if="{{ !multiple }}" bind>
        <paper-radio-group id="singleSelector" valueattr="value" selected="{{ selected }}">
          <template repeat="{{ item in items }}">
            <paper-radio-button value="{{ item.value }}" on-change="{{ updateGridState }}" label="{{ item.label }}"></paper-radio-button>
          </template>
        </paper-radio-group>
      </template>
    </div>
  </template>
  <script>
    Polymer('p2b-grid-filter-select', {
     /*
      * Whether multiple items can be selected
      * @type {boolean}
      */
      multiple: false,

      /*
       * Key that will be added to filters map passed to the fetch() function of your data source.
       * @type {string}
       */
      key: '',

      ready: function() {
        // find the selected items from the child nodes
        this.items = Array.prototype.slice.call(this.$.content.getDistributedNodes());
        for(var i=0; i < this.items.length; i++){
          if(this.items[i].checked) {
            if(this.multiple) {
              this.selected = this.selected || [];
              this.selected.push(this.items[i].value);
            } else {
              this.selected = this.items[i].value;
            }
          }
        }
      },

      updateGridState: function() {
        if( this.multiple ) {
          // quirk: we need to copy the array so change is observed. .slice() does that
          this.gridState.filters[this.key] = this.$.multiSelector.selected.slice();
        } else {
          this.gridState.filters[this.key] = this.$.singleSelector.selected.slice();
        }
      }

    });
    </script>
</polymer-element>