<!--
ag-data-grid-filter-select renders a select list filter.
The value(s) of the filter is provided to the ```dataSource's fetch``` function
as a string value or array of string values in case of multi-selection in the
filters map. ```filters[key]: <string|string[]>```.
Values come from value field of child ag-data-grid-filter-select-item elements.

Usage:
  ```
    <ag-data-grid-filter-select
        multiple
        key="status"
        label="Show contacts that are">

      <ag-data-grid-filter-select-item
        checked
        label="Online"
        value="online">
      </ag-data-grid-filter-select-item>
      <ag-data-grid-filter-select-item
        checked
        label="Away"
        value="away">
      </ag-data-grid-filter-select-item>
      <ag-data-grid-filter-select-item
        checked
        label="Offline"
        value="offline">
      </ag-data-grid-filter-select-item>

    </ag-data-grid-filter-select>
  ```
@element ag-data-grid-filter-select
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../../paper-radio-group/paper-radio-group.html">
<polymer-element name="ag-data-grid-filter-select" attributes="multiple key label" grid-filter expects-grid-state>
  <template>
    <link rel="stylesheet" href="ag-data-grid-filter-select.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('ag-data-grid-filter-select', {
     /**
      * Whether multiple items can be selected
      * @attribute multiple
      * @type boolean
      * @default false
      */
      multiple: false,

      /**
       * Key that will be added to filters map passed to the fetch() function of your data
       * source. value would be a string value or array of string values in case of
       * multi-selection in the filters map.
       * @attribute key
       * @type string
       * @default ''
       */
      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() {
        var me = this;
        setTimeout(function() {
          if (me.multiple ) {
            // quirk: we need to copy the array so change is observed. .slice() does that
            me.gridState.filters[me.key] = me.$.multiSelector.selected.slice();
          } else {
            me.gridState.filters[me.key] = me.$.singleSelector.selected.slice();
          }
        });
      }

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