import {Component, OnInit} from "@angular/core";
import {Location} from "@angular/common";

import {FormControl} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Observable} from "rxjs/Observable";
import {Decoration} from "../../models/model-interfaces";
import {DecorationService} from "../../services/decoration-service/decoration.service";

@Component({
  selector: 'decoration-list',
  templateUrl: './decoration-list.component.html',
  styleUrls: ['./decoration-list.component.css']
})
export class DecorationListComponent implements OnInit {

  selectedDecorationId: string | number = null;

  decorations$: Observable<Decoration[]>;

  searchTerm = new FormControl();

  fractionRadioSelect: string;

  constructor(private decorationService: DecorationService,
              private router: Router,
              private route: ActivatedRoute,
              private location: Location) {
  }

  ngOnInit() {

    this.decorations$ = this.decorationService.decorations$;

    const paramsStream = this.route.queryParams
      .map(params => decodeURI(params['query'] || ''))
      .do(query => this.searchTerm.setValue(query));

    const searchTermStream = this.searchTerm.valueChanges
      .debounceTime(400)
      .do(query => this.adjustBrowserUrl(query));

    Observable.merge(paramsStream, searchTermStream)
      .distinctUntilChanged()
      .switchMap(query => this.decorationService.findDecorations(query, this.fractionRadioSelect))
      .subscribe();

  }

  openNewSquadForm() {
    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
  }

  selectDecoration(decorationId: string | number) {
    this.selectedDecorationId = decorationId;
    this.router.navigate([{outlets: {'right': ['overview', decorationId]}}], {relativeTo: this.route});
  }

  filterSquadsByFraction(query = '', fractionFilter) {
    this.decorations$ = this.decorationService.findDecorations(query, fractionFilter);
  }

  adjustBrowserUrl(queryString = '') {
    const absoluteUrl = this.location.path().split('?')[0];
    const queryPart = queryString !== '' ? `query=${queryString}` : '';

    this.location.replaceState(absoluteUrl, queryPart);
  }

}