import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
  FilteringSettings,
  BindingInfo,
  FilterUIType,
} from '@mobilize/wms-framework';
import { BaseComponent } from '../base/base.component';

/**
 * Placeholder for the filtering settings template object
 *
 * @export
 * @class XamGridFilteringSettingsComponent
 */
@Component({
  selector: 'wm-xam-grid-filtering-settings',
  template: `<ng-content></ng-content>`,
})
export class XamGridFilteringSettingsComponent {}

/**
 * Xam grid filtering settings as template
 *
 * @export
 * @class FilteringSettingsComponent
 */
@Component({
  selector: 'wm-filtering-settings',
  template: ``,
})
export class FilteringSettingsComponent
  extends BaseComponent
  implements OnInit
{
  /**
   * Enables/disables filtering in the Xam grid
   *
   * @memberof FilteringSettingsComponent
   */
  @Input()
  get allowFiltering(): string | FilterUIType | BindingInfo {
    return this.model.AllowFiltering;
  }

  set allowFiltering(value: string | FilterUIType | BindingInfo) {
    /* istanbul ignore else */
    if (
      !this.checkAndRegisterCompatibilityBinding(
        FilteringSettings.AllowFilteringProperty,
        value
      )
    ) {
      if (typeof value === 'string') {
        if (value === 'FilterRowTop') {
          this.model.AllowFiltering = FilterUIType.FilterRowTop;
        } else if (value === 'FilterRowBottom') {
          this.model.AllowFiltering = FilterUIType.FilterRowBottom;
        } else if (value === 'FilterMenu') {
          this.model.AllowFiltering = FilterUIType.FilterMenu;
        } else {
          this.model.AllowFiltering = FilterUIType.None;
        }
      } else {
        this.model.AllowFiltering = value as FilterUIType;
      }
    }
  }

  /**
   * Event emitter for two-way binding of the `allowFiltering` property.
   *
   * @type {EventEmitter<FilterUIType>}
   * @memberof FilteringSettingsComponent
   */
  @Output()
  allowFilteringChange: EventEmitter<FilterUIType> = new EventEmitter<FilterUIType>();

  /**
   * Filtering settings model
   *
   * @memberof FilteringSettingsComponent
   */
  public model = new FilteringSettings();

  /**
   * Angular life-cycle hook
   *
   * @memberof FilteringSettingsComponent
   */
  ngOnInit() {
    this.setupModel(this.model);
  }

  /**
   *Method to handle the model's change
   *
   * @param { string } name - property name that change
   * @memberof BaseComponent
   */
  modelChangeHandler(name: string) {
    if (name === 'AllowFiltering') {
      this.model.internalXamGrid?.change.fire(['FilteringSettings']);
    }
  }
}