import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
import { TabService } from './services/tab.service';
import { Observable } from 'rxjs';
import { ThemePalette } from '@angular/material/core';
import { TabEntity } from './models/tab-entity';
import { Router } from '@angular/router';

@Component({
  selector: 'app-nav-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TabsComponent implements OnInit {

  activeTabs$: Observable<TabEntity>;
  activeTabIndex$: Observable<number>;
  @Input() primaryTab: TabEntity;
  @Input() hideRouter: boolean = true;

  background: ThemePalette = undefined;

  constructor(private tabService: TabService, private router: Router) {
    this.activeTabs$ = this.tabService.activeTabs;
    this.activeTabIndex$ = this.tabService.activeTabIndex;
  }

  ngOnInit(): void {
    if (!!this.primaryTab) {
      this.tabService.dispatchAddTab(this.primaryTab);
    }
  }

  removeTab(tab: TabEntity): void {
    this.router.navigate([this.primaryTab.route]);
    this.tabService.dispatchCloseTab( tab.tabName );
  }

  setActiveTab(tab: TabEntity): void {
    this.tabService.dispatchSetActiveTab( tab );
  }

}