/*
 * Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { CommandbarSidebarComponent, CommandbarSidebarRoutingNavigatorDirective } from '@bci-web-core/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserService } from '../../../shared/user-service.service';
import { FilterEntry, SelectionFilterEntry } from '../complex-filter/complex-filter.model';
import { UserFilterService } from '../filter/user-filter.service';

@Component({
  selector: 'bci-sidebar-filter',
  templateUrl: './sidebar-filter.component.html',
  styleUrls: ['./sidebar-filter.component.scss'],
})
export class SidebarFilterComponent implements AfterViewInit, OnDestroy {
  /** WARNING: This FilterEntry model does not work nicely in case multiple entries share a common state.
   *  POSSIBLE SOLUTION: Use a comprehensive filter state cloned from the commandbar's / tables filter state and sync it back upon closing the sidebar.
   *  ...and please consider contributing it back to the BCI Web Core ;)
   */

  filterDepartments = new SelectionFilterEntry(
    'Departments',
    this.filterService,
    this.filterService.departmentFilter,
    new SelectionModel<string>(true, this.filterService.departmentFilter.term, true),
    '',
    'department'
  );
  filter1 = new FilterEntry('Filter 1', this.filterService, this.filterService.filter1, '', 'filter1');
  filter2 = new FilterEntry('Filter 2', this.filterService, this.filterService.filter2, '', 'filter2');
  filter3 = new FilterEntry('Filter 3', this.filterService, this.filterService.filter3, '', 'filter3');
  filter4 = new FilterEntry('Filter 4', this.filterService, this.filterService.filter4, '', 'filter4');
  customFilters: FilterEntry[] = [this.filter1, this.filter2, this.filter3, this.filter4];
  filters: FilterEntry[] = [this.filterDepartments, ...this.customFilters];

  departments = [];

  foods = [
    { value: null, viewValue: 'None' },
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' },
    { value: 'stationary', viewValue: 'Stationary' },
  ];

  private componentDestroyed$: Subject<void> = new Subject();

  @ViewChild(CommandbarSidebarRoutingNavigatorDirective)
  commandbarSidebarNavigator: CommandbarSidebarRoutingNavigatorDirective;
  @ViewChild(CommandbarSidebarComponent) commandbarSidebar: CommandbarSidebarComponent;

  constructor(public filterService: UserFilterService, private userService: UserService) {
    this.userService
      .queryDepartments()
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe((departments) => {
        this.departments.length = 0;
        this.departments.push(...Array.from(departments));
      });
  }

  ngAfterViewInit(): void {
    this.commandbarSidebar.opening.pipe(takeUntil(this.componentDestroyed$)).subscribe(() => {
      this.filters.forEach((filterEntry) => filterEntry.init());
    });
  }

  ngOnDestroy() {
    this.componentDestroyed$.next();
    this.componentDestroyed$.complete();
  }

  open() {
    this.filterDepartments = new SelectionFilterEntry(
      'Departments',
      this.filterService,
      this.filterService.departmentFilter,
      new SelectionModel<string>(true, this.filterService.departmentFilter.term, true),
      '',
      'department'
    );
    this.filters = [this.filterDepartments, ...this.customFilters];

    this.commandbarSidebarNavigator.open();
  }

  applyFilters() {
    this.filters.forEach((filterEntry) => filterEntry.applyComplexFilter(this.filterService));
  }
}
