import { IFilterParams } from 'ag-grid-community';
import { Container } from 'aurelia-framework';
import * as breeze from 'breeze-client';
import { ServiceBase } from "../../data/service-base";
import { Config } from '../../config';
import { BaseRelationFilter } from './base-relation-filter';

export class OneToManyFilter<T extends breeze.Entity> extends BaseRelationFilter<T> {

  protected filterType: string = 'oneToMany';

  public init(params: IFilterParams & { serviceName: string, service: ServiceBase<T> }): void {
    this.config = Container.instance.get(Config);
    this.buildService(params);
    super.init(params);
  }

  public getModel() {
    let model = super.getModel();
    if (model != null) {
      Object.assign(model, { displayEmptyFields: this.displayEmptyFields });
    }
    return model;
  }

  public async setupContentGui(): Promise<string> {
    await super.setupContentGui();
    return `
    <div class="floating-filter__body__one-to-many">
      <div class="floating-filter__body__search">
        <ui-field t="[label]common:grid.searchShort">
          <ui-input type="text" value.bind="valueSearch & debounce:500" t="[placeholder]common:grid.searchShort" autofocus.one-time="true" allow-clear.one-time="true">
            <ui-input-addon icon="digi-search"></ui-input-addon>
          </ui-input>
        </ui-field>
        <div class="ui-check__wrapper" if.bind="showEmptyFieldsCheckbox">
          <ui-checkbox checked.bind="displayEmptyFields">\${ 'grid.displayEmptyFields' | t }</ui-checkbox>
        </div>
      </div> 

      <div class="floating-filter__body__one-to-many__list">
        <div repeat.for="filterValue of filterValues" if.bind="!filterValue.hide" class="floating-filter__body__one-to-many__list__elem">
          <ui-checkbox checked.bind="filterValue.selected" title.bind="filterValue.name">\${filterValue.name}</ui-checkbox>
        </div>
      </div>
    </div>`;
  }

  public setupContentGuiSideFilter(): string {
    return `
    <div class="col s12 m12 l12">
      <ui-field label.bind="params.colDef.headerName">
        <ui-select multiple t="[placeholder]general.chooseAnOption" value.bind="selectedIds">
          <option repeat.for="value of filterValues" value.bind="value.id">
            \${value.name}</option>
          <ui-select-header-template>
            <div class="ui-check__wrapper" if.bind="showEmptyFieldsCheckbox">
                <ui-checkbox checked.bind="displayEmptyFields">\${ 'grid.displayEmptyFields' | t }</ui-checkbox>
            </div>
          </ui-select-header-template>
        </ui-select>
      </ui-field>
    </div>`;
  }
}
