import { IFloatingFilterParams } from "ag-grid-community";
import { ServiceBase } from "../../data/service-base";
import * as breeze from 'breeze-client';
import { BaseRelationFloatingFilter } from './base-relation-floating-filter';
import { FilterMode } from "../../model/common-model";

export class OneToManyFloatingFilter<T extends breeze.Entity> extends BaseRelationFloatingFilter<T> {

  protected get filterType(): string {
    return 'oneToMany'
  }

  public async init(params: IFloatingFilterParams & { serviceName: string, service: ServiceBase<T> }) {
    if (params.service == null && params.serviceName != null) {
      params.service = new ServiceBase<T>(params.serviceName);
    }
    if (params.service == null) {
      throw new Error("service or serviceName parameter is missing");
    }
    await super.init(params);
  }

  public setInstanceModel() {
    (this.params as IFloatingFilterParams).parentFilterInstance((instance) => {
      instance.setModel({ filterType: this.filterType, filter: this.filterValues, displayEmptyFields: this.displayEmptyFields });
    });
  }

  public 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" 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>`;
  }

  public toggleFilterMode(filterMode: FilterMode) {
    this.setInstanceModel()
  }
}
