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

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

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

export class AppComponent {
  opened = true;
  darkTheme = "false";
  title = 'we.bstly';
  currentLocale: String;
  datetimeformat: String;
  locales;
  auth;

  constructor(
    private i18n: I18nService,
    private authService: AuthService,
    private profileService: ProfileService,
    private router: Router,
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer,
    private _adapter: DateAdapter<any>) {
    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
  }

  ngOnInit() {
    this.datetimeformat = this.i18n.get('format.datetime', []);
    this.currentLocale = this.i18n.getLocale();
    this.locales = this.i18n.getLocales();
    this.authService.auth.subscribe(data => {
      this.auth = data;
    })

    this._adapter.setLocale(this.currentLocale);

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

    if(localStorage.getItem("bstly.darkTheme") == "true") {
      this.darkTheme = "true";
      window.document.body.classList.add("dark-theme");
    }
  }

  setLocale(locale) {
    localStorage.setItem("bstly.locale", locale);

    if(this.auth && this.auth.authenticated) {
      this.profileService.getField("locale").subscribe((profileField: any) => {

        if(profileField == null) {
          profileField = {
            "name": "locale",
            "type": "TEXT",
            "visibility": "PRIVATE"
          }
        }

        profileField.value = locale;
        this.profileService.createOrUpdate(profileField).subscribe((response) => {
          window.location.reload();
        })
      })
    } else {
      window.location.reload();
    }
  }

  darkThemeChange($event) {
    if($event.checked) {
      this.darkTheme = "true";
    } else {
      this.darkTheme = "false";
    }

    localStorage.setItem("bstly.darkTheme", this.darkTheme);

    if(this.auth && this.auth.authenticated) {
      this.profileService.getField("darkTheme").subscribe((profileField: any) => {

        if(profileField == null) {
          profileField = {
            "name": "darkTheme",
            "type": "BOOL",
            "visibility": "PRIVATE"
          }
        }

        profileField.value = this.darkTheme;
        this.profileService.createOrUpdate(profileField).subscribe((response) => {
          window.location.reload();
        })
      })
    } else {
      window.location.reload();
    }

  }

  logout() {
    this.authService.logout().subscribe(data => {
      this.router.navigate([""]).then(() => {
        window.location.reload();
      });
    })
  }

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

  openExternal(url, target = '_self') {
    window.open(url, target);
  }

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