import { Component, HostListener } from '@angular/core';

import { AuthService } from './services/auth.service';
import { I18nService } from './services/i18n.service';
import { Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';

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

export class AppComponent {
  opened = true;
  title = 'we.bstly';
  currentLocale: String;
  auth;

  constructor(private i18n: I18nService, private authService: AuthService, private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
    this.currentLocale = this.i18n.getLocale();
  
    this.authService.auth.subscribe(data => {
      this.auth = data;
    })

    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
  }

  ngOnInit() {
    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width < 768) {
      this.opened = false;
    } else {
      this.opened = true;
    }
  }

  setLocale(locale) {
    localStorage.setItem("bstly.locale", locale);
    window.location.reload();
  }

  logout() {
    this.authService.logout().subscribe(data => {
      this.router.navigate([""]);
      console.log("ja?");
    })
  }

  isBiggerScreen() {
    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width < 768) {
      return false;
    } else {
      return true;
    }
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth < 768) {
      this.opened = false;
    } else {
      this.opened = true;
    }
  }
}