import { Component, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
import { DetailsService } from 'src/services/details/details.service';
import { ModalService } from 'src/services/modal/modal.service';

@Component({
  selector: 'navigation-panel',
  templateUrl: './navigation-panel.component.html',
  styleUrl: './navigation-panel.component.scss',
})
export class NavigationPanelComponent {
  @ViewChild('navigationBackdrop') backdrop: any;
  @ViewChild('navigationPanel') panel: any;
  public active: number = 1;

  constructor(
    private navigation: NavigationPanelService,
    private router: Router,
    private detailsAccessor: DetailsService,
    private modalAccessor: ModalService,
  ) {}

  public ngOnInit(): void {
    this.navigation.showNavigationPanel$.subscribe((state) => {
      if (state) {
        this.openPanel();
      } else {
        this.closePanel();
      }
    });
    this.checkForActiveTab();
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.checkForActiveTab();
      }
    });
  }

  public openPanel(): void {
    this.backdrop.nativeElement.classList.add('backdrop--open');
    this.panel.nativeElement.classList.add('panel--open');
  }

  public closePanel(): void {
    this.backdrop?.nativeElement.classList.remove('backdrop--open');
    this.panel?.nativeElement.classList.remove('panel--open');
  }

  public closeAll() {
    this.detailsAccessor.closePanel('cancel');
    this.modalAccessor.handleModalClosing('cancel');
  }

  public checkForActiveTab(): void {
    const tab = this.router.url.split('/')[2];
    switch (tab) {
      case 'stats':
        this.active = 1;
        break;
      case 'character':
        this.active = 2;
        break;
      case 'inventory':
        this.active = 3;
        break;
      case 'spellcards':
        this.active = 4;
        break;
      case 'spellbook':
        this.active = 5;
        break;
      case 'notes':
        this.active = 6;
        break;
      case 'quests':
        this.active = 7;
        break;
      case 'npcs':
        this.active = 8;
        break;
      case 'places':
        this.active = 9;
        break;
      case 'maps':
        this.active = 10;
        break;
      case 'ruleset':
        this.active = 11;
        break;
      case 'settings':
        this.active = 12;
        break;
      default:
        this.active = 1;
        break;
    }
  }

  public setActiveProperty(number: number) {
    this.active = number;
  }
}