import { Component, Inject } from '@angular/core';
import {
  DataTemplate,
  TEMPLATE_COMPONENT_CONTEXT,
  TEMPLATE_DECLARING_CONTEXT,
} from '@mobilize/wms-framework';
import { BaseComponent } from '../../base/base.component';

@Component({
  selector: 'wm-component-wrapper',
  template: `<wm-auto-complete-box
    [text]="text"
    [isTextCompletionEnabled]="true"
    [minimumPrefixLength]="2"
    [minimumPopulateDelay]="5000"
    [isEnabled]="enabled"
    [filterMode]="'Contains'"
    [itemsSource]="items"
    [name]="name"
  >
  </wm-auto-complete-box>`,
})
export class TestWrapperComponent {
  text = 'this a mock text';
  enabled = false;
  items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7'];
  name = 'autocompletebox1';
  width = 300;
  height = 100;
}

@Component({
  selector: 'wm-component-wrapper',
  template: `<wm-auto-complete-box
    [itemsSource]="items"
    [selectedItem]="selectedItem"
    [itemTemplate]="itemTemplate"
  >
  </wm-auto-complete-box>`,
})
export class TestWrapper2Component {
  items = [
    { name: 'name1', lastname: 'lastname1' },
    { name: 'name1', lastname: 'lastname1' },
    { name: 'name1', lastname: 'lastname1' },
  ];
  selectedItem = 'selected';
  itemTemplate = new DataTemplate(AutoCompleteBoxSampleTemplateComponent);
}

@Component({
  selector: 'wm-app-autocompleteboxsampletemplatecomponent',
  template: `<div>{{ context.lastname }}</div>`,
})
export class AutoCompleteBoxSampleTemplateComponent extends BaseComponent {
  constructor(
    @Inject(TEMPLATE_COMPONENT_CONTEXT) public context: any,
    @Inject(TEMPLATE_DECLARING_CONTEXT) public declaringContext: any
  ) {
    super();
  }
}