import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { FIELDS } from './fields.constant';
import { Filter } from '../../lib/components/filtering/filtering.interface';
import { DEFAULT_FILTERING } from '../../lib/components/filtering/filtering.constants';

@Component({
  selector:        'app-demo-filtering',
  template:        `
                     <div class="buttons">
                       <button mat-raised-button
                               (click)="hideGeo = !hideGeo">Toggle</button>
                       <button mat-raised-button
                               (click)="showFiltering(true, $event)">Show Filtering</button>
                       <app-localization></app-localization>
                     </div>

                     <div class="content">
                       <app-filtering *ngIf="!hideGeo"
                                      [addFilterButtonTitle]="'app-filtering.ADD'"
                                      [applyFilterButtonTitle]="'app-filtering.APPLY'"
                                      [clearFilterButtonTitle]="'app-filtering.CLEAR'"
                                      [fields]="fields"
                                      [filtering]="filtering"
                                      (apply)="onApply($event)"></app-filtering>
                     </div>

                     <app-spec (close)="showFiltering(false, $event)"
                               *ngIf="isSpecVisible"
                               [spec]="filtering"></app-spec>
                   `,
  styles:          [`
    .buttons {
      margin-bottom: 20px;
    }

    .content {
      margin: 10px 0;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoFilteringComponent {
  hideGeo       = false;
  isSpecVisible = false;

  filtering: Array<Filter> = [].concat(DEFAULT_FILTERING);
  fields                   = FIELDS;

  showFiltering (isVisible, event?) {
    if (event) {
      event.stopPropagation();
    }

    this.isSpecVisible = isVisible;

    this.changeDetectorRef.markForCheck();
    this.changeDetectorRef.detectChanges();
  }

  onApply (filtering) {
    console.log(`Apply filtering: `, filtering);
  }

  constructor (private changeDetectorRef: ChangeDetectorRef) { }
}