import {bindable, customAttribute} from 'aurelia-templating';
import {inject} from 'aurelia-dependency-injection';
import {getLogger} from 'aurelia-logging';

// import {fireEvent} from '../common/events';

@customAttribute('md-chips')
@inject(Element)
export class MdChips {
  @bindable() data = [];
  @bindable() placeholder = '';
  @bindable() secondaryPlaceholder = '';

  constructor(element) {
    this.element = element;
    this.log = getLogger('md-chips');

    this.onChipAdd = this.onChipAdd.bind(this);
    this.onChipDelete = this.onChipDelete.bind(this);
    this.onChipSelect = this.onChipSelect.bind(this);
  }

  attached() {
    let options = {
      data: this.data,
      placeholder: this.placeholder,
      secondaryPlaceholder: this.secondaryPlaceholder
    };
    $(this.element).material_chip(options);
    $(this.element).on('chip.add', this.onChipAdd);
    $(this.element).on('chip.delete', this.onChipDelete);
    $(this.element).on('chip.select', this.onChipSelect);
  }

  detached() {
    //
  }

  onChipAdd(e, chip) {
    // fireEvent(this.element, 'change');
  }
  onChipDelete(e, chip) {
    // fireEvent(this.element, 'change');
  }
  onChipSelect(e, chip) {
    // fireEvent(this.element, 'change');
  }
}

@@ -55,16 +55,61 @@
 ating';%0A
+import %7BbindingMode%7D from 'aurelia-binding';%0A
 import %7B
@@ -326,16 +326,58 @@
 indable(
+%7B defaultBindingMode: bindingMode.twoWay %7D
 ) data =
@@ -1165,32 +1165,87 @@
 ent, 'change');%0A
+    this.data = $(this.element).material_chip('data');%0A
   %7D%0A  onChipDele
@@ -1296,24 +1296,79 @@
  'change');%0A
+    this.data = $(this.element).material_chip('data');%0A
   %7D%0A  onChip

change data when chips change, fix #363