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

import 'rxjs/add/operator/first';

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

  title = 'Joachim Homepage';
  mousingOver: string = null;
  pageType: string;

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

  ngOnInit() {
    // console.log('oninit of root component');
    this.route.paramMap.subscribe(val => console.log(val));

    // this.stateService.getLanguageFromRoute(this.route).subscribe(val => {
    //   console.log('ngoninit root language: ' + val)
    // });

    /**
     * Listen to changes in the param map (this is the root level, so will only see changes in 'language'. good!
     */
    // this.route.paramMap.subscribe((paramMap: ParamMap) => {
    //   const language = paramMap.get('language');
    //   console.log(`root comp  listens for parammap: ${language}`)
    //   // console.log('root:  parammap changed ' + language);
    //   if (language !== null) {
    //     console.log('the subscriber of root changes the language to '+language);
    //     this.stateService.setLanguage(language, this.route, this.router);
    //   }
    // });

    // set the service, we know that this route is the one we need for language changes (parameter), so we gotta keep track of it
    this.stateService.setRootRoute(this.route);

    // we listen to a 'navigation end' event -> at that point we need update our pagetype string
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
      // navigated somewhere, got to make sure the pagetype has updated too
      this.updatePageType();
    });

    // do the first update for the page type
    this.updatePageType();


  }

  /**
   * Update the pagetype according to the right language and current router url.
   */
  updatePageType() {
    // console.log('firing update page type');
    // console.log(this.router.url);
    if (this.router.url.endsWith('posts')) {
      this.pageType = 'Posts';
    } else if (this.router.url.endsWith('cv')) {
      this.pageType = 'Curriculum Vitae';
    } else if (this.router.url.endsWith('home')) {
      if (this.stateService.getLanguage() === 'nl') {
        this.pageType = 'Thuis';
      } else {
        this.pageType = 'Home';
      }
    } else {
      this.pageType = 'Joa did something wrong...';
    }
  }

  mouseOver(s: string) {
    // console.log('mouseover!' + s);
    // do some translation
    let language = this.stateService.getLanguage();
    if (s === 'lang') {
      if (language == 'nl') {
        this.mousingOver = 'Taal: Nederlands';
      } else if (language = 'en') {
        this.mousingOver = 'Language: English';
      } else {
        this.mousingOver = 'Language: Yaaarrrr matey!';
      }
    } else {
      // default: use the passed string
      this.mousingOver = s;
    }
  }

  mouseOut(s: string) {
    this.mousingOver = null;
  }

  toggleLanguage() {
    console.log('toggleLanguage called');
    if (this.stateService.getLanguage() === 'nl') {
      console.log(' > toggle switched to en');
      this.stateService.setLanguage('en', this.route, this.router);
    } else if (this.stateService.getLanguage() === 'en') {
      this.stateService.setLanguage('nl', this.route, this.router);
      console.log(' > toggle switched to nl');
    } else {
      console.log(' > Could not toggle the language, pirates stole your tongue.');
    }
  }
}