import { Component, OnInit } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { Router } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { marker } from '@biesbjerg/ngx-translate-extract-marker';
import { styleChangedObserver } from "src/app/components/header/header.component";
import { AuthService } from "src/app/shared/server-services/auth.service";
import { TitleService } from "src/app/shared/services/title.service";
import { sideMenuActiveObserver } from "../header/header.component";
import { GuideService } from "src/app/shared/guide/guide.service";
import { MatSliderChange } from "@angular/material/slider";

@Component({
  selector: "app-settings",
  templateUrl: "./settings.component.html",
  styleUrls: ["./settings.component.scss"],
})
export class SettingsComponent implements OnInit {
  public nightMode: boolean;
  public guides: boolean;
  public volumeValue: number = 1;
  public supportedLanguages = {
    "hu": "Magyar",
    "en": "English"
  }
  public selectedLang;

  constructor(
    private authService: AuthService,
    private router: Router,
    private translate: TranslateService,
    private titleService: TitleService,
    public dialog: MatDialog,
    private guideService: GuideService
  ) {
    this.nightMode = localStorage.getItem("style_mode") == "dark";
    this.guides = this.guideService.isGuideSystemOn();
    console.log('guide service', this.guideService.isGuideSystemOn(), this.guides)

    styleChangedObserver.subscribe((style) => {
      this.nightMode = style == "dark";
    });

    this.selectedLang = localStorage.getItem('lang');

    this.titleService.setTabTitle(marker("Settings"));

    var volume = localStorage.getItem("volume");
    if(volume)
      this.volumeValue = parseFloat(volume);
  }

  ngOnInit(): void {
    sideMenuActiveObserver.next(false);
  }

  public toggleTheme(): void {
    this.nightMode = !this.nightMode;
    styleChangedObserver.next(this.nightMode ? "dark" : "light");
  }

  public toggleGuides(): void{
    this.guides = !this.guides;
    this.guideService.turnGuideSystem(this.guides);
  }

  public changeLanguage(lang): void {
    this.selectedLang = lang;
    this.translate.use(lang);
    localStorage.setItem("lang", lang);
  }

  public volumeChange(e: MatSliderChange): void{
    this.volumeValue = e.value;
    localStorage.setItem("volume", this.volumeValue.toString());
  }
}
