import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {Fraction} from '../../utils/fraction.enum';
import {Decoration} from '../../models/model-interfaces';
import {DecorationService} from '../../services/army-management/decoration.service';
import {MatBottomSheet} from '@angular/material';
import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
import {Location} from '@angular/common';


@Component({
  selector: 'cc-decoration-overview',
  templateUrl: './decoration-overview.component.html',
  styleUrls: ['./decoration-overview.component.scss']
})
export class DecorationOverviewComponent implements OnInit, OnDestroy {

  decorations: Decoration[];

  medals: Decoration[];

  ribbons: Decoration[];

  active: string;

  selectedType = 0;

  readonly fraction = Fraction;

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

  ngOnInit() {
    // init decoration data
    this.decorationService.findDecorations()
        .subscribe(decorations => {
          this.decorations = decorations;
          const queryParams = this.route.snapshot.queryParams;
          if (queryParams.type < 2) {
            this.selectedType = queryParams.type;
          }

          const fract = queryParams.fraction;
          if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
            this.switchFraction(queryParams.fraction);
          } else {
            this.switchFraction('BLUFOR');
          }
        });
  };

  ngOnDestroy() {
    this.bottomSheet.dismiss();
  }

  switchFraction(value: any) {
    this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
    this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
    this.active = value;
    this.adjustBrowserUrl(value)
  }

  switchTab(tabIndex) {
    this.selectedType = tabIndex;
    this.adjustBrowserUrl(this.active)
  }

  select(decoration: Decoration) {
    this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
  }

  adjustBrowserUrl(fractionKey = '') {
    const absoluteUrl = this.location.path().split('?')[0];
    if (fractionKey === 'BLUFOR' && this.selectedType === 0) {
      this.location.replaceState(absoluteUrl);
      return;
    }
    const queryPart = fractionKey !== '' ? 'fraction='.concat(fractionKey)
                                                      .concat('&type=' + this.selectedType) : 'type=0';

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