<!--
ag-data-grid-filter-toggle renders a boolean filter.
The value of the filter is provided to the ```dataSource's fetch``` function
as a value in the filters map. ```filters[key]: <boolean>```

Usage:
  ```
    <ag-data-grid-filter-toggle
      key="withPhone"
      label="Only show contacts that have a phone number">
    </ag-data-grid-filter-toggle>
  ```
@element ag-data-grid-filter-toggle
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html">
<polymer-element name="ag-data-grid-filter-toggle" attributes="key checked label" grid-filter expects-grid-state>
  <template>
    <link rel="stylesheet" href="ag-data-grid-filter-toggle.css">
    <link rel="stylesheet" href="../common.css">
    <div class="filter-container">
      <h3>{{label}}</h3>
      <paper-toggle-button id="toggle" on-change="{{ updateGridState }}" checked?="{{ checked }}"></paper-toggle-button>
    </div>
  </template>
  <script>
    Polymer('ag-data-grid-filter-toggle', {
      /**
       * Label text for the toggle filter
       * @attribute label
       * @type string
       * @default ''
       */
      label: '',

      /**
       * Whether toggle is checked or not
       * @attribute checked
       * @type boolean
       * @default false
       */
      checked: false,

      /**
       * Key that will be added to filters map passed to the fetch() function of
       * your data source with the value of the filter (boolean in this case)
       * @attribute key
       * @type string
       * @default ''
       */
      key: '',

      updateGridState: function() {
        this.gridState.filters[this.key] = this.$.toggle.checked;
      }
    });
    </script>
</polymer-element>