import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {StateService} from '../../services/state.service';

@Component({
  selector: 'app-languagetoggle',
  templateUrl: './languagetoggle.component.html',
  styleUrls: ['./languagetoggle.component.scss']
})
export class LanguagetoggleComponent implements OnInit {

  /**
   * This is the language for which the component is defined. Typically, when the currently set language is equal to this variable,
   * the component will be visible.
   */
  @Input()
  private language: string;

  /**
   * if this is set to true, the component will be visible
   */
  show = false;

  constructor(private router: Router, private route: ActivatedRoute, private stateService: StateService) {
  }

  ngOnInit() {
    // start listening to the stateservice for language updates
    this.stateService.getLanguageObservable().subscribe(val => {
      console.log('language toggle gets a language update from state service: ' + val);
      this.show = (this.language === val);
      console.log(' after language update, show: ' + this.show);
    });


  }

  private updateValues() {
    const lang = this.stateService.getLanguage();
    if (lang == null) {
      console.log('languagetoggle: language is null from stateservice, ignoring');
      return;
    }
    console.log('languagetoggle (' + this.language + ') gets lang: ' + lang);
    if (lang === this.language) {
      console.log('languagetoggle: showing the component ' + lang);
      this.show = true;
    } else {
      console.log('languagetoggle: NOT showing the component ' + lang);
      this.show = false;
    }
    console.log(`show: ${this.show  }`);
  }

}