import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSliderChange } from '@angular/material/slider';
import { marker } from '@biesbjerg/ngx-translate-extract-marker';
import { TranslateService } from '@ngx-translate/core';
import { AppStorage } from 'src/app/shared/app-storage';
import { GuideService } from 'src/app/shared/guide/guide.service';
import { AudioService, Sounds } from 'src/app/shared/services/audio.service';
import { CordovaService } from 'src/app/shared/services/cordova.service';
import { DialogService } from 'src/app/shared/services/dialog.service';
import { ServerRestApiService } from 'src/app/shared/services/server-rest-api.service';
import { SnackBarService } from 'src/app/shared/services/snackbar.service';
import { TitleService } from 'src/app/shared/services/title.service';
import { styleChangedObserver } from 'src/app/shared/shared-observers';

export enum ChatMessageGroupingPolicy {
  sameYear,
  sameMonth,
  sameDay,
  sameHour,
  sameMinute,
  in1Day,
  in3Hours,
  in2Hours,
  in1Hour,
  in30Minutes,
  in10Minutes,
  in5Minutes,
}

@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;

  public chatGroupingPolicies = {
    [ChatMessageGroupingPolicy.sameYear]: marker('Same year'),
    [ChatMessageGroupingPolicy.sameMonth]: marker('Same month'),
    [ChatMessageGroupingPolicy.sameDay]: marker('Same day'),
    [ChatMessageGroupingPolicy.sameHour]: marker('Same hour'),
    [ChatMessageGroupingPolicy.sameMinute]: marker('Same minute'),
    [ChatMessageGroupingPolicy.in1Day]: marker('In 1 day'),
    [ChatMessageGroupingPolicy.in3Hours]: marker('In 3 hours'),
    [ChatMessageGroupingPolicy.in2Hours]: marker('In 2 hours'),
    [ChatMessageGroupingPolicy.in1Hour]: marker('In 1 hour'),
    [ChatMessageGroupingPolicy.in30Minutes]: marker('In 30 minutes'),
    [ChatMessageGroupingPolicy.in10Minutes]: marker('In 10 minutes'),
    [ChatMessageGroupingPolicy.in5Minutes]: marker('In 5 minutes'),
  };
  public selectedChatGroupingPolicy;
  public chatGroupingPoliciesSelectValues;

  public messageDisplays = [
    {
      value: 'cozy',
      displayName: marker('Cozy'),
    },
    {
      value: 'compact',
      displayName: marker('Compact'),
    },
  ];
  public selectedMessageDisplay;

  constructor(
    private translate: TranslateService,
    private titleService: TitleService,
    public dialog: MatDialog,
    private guideService: GuideService,
    private audioService: AudioService,
    private serverRestApiService: ServerRestApiService,
    private dialogService: DialogService,
    private snackbarService: SnackBarService,
    private cordovaService: CordovaService
  ) {
    this.chatGroupingPoliciesSelectValues = Object.entries(this.chatGroupingPolicies).map(
      ([key]) => ({
        key: key.padStart(2, '0'),
        value: key,
        displayName: this.chatGroupingPolicies[key],
      })
    );

    this.selectedChatGroupingPolicy =
      AppStorage.getItem('chatGroupingPolicy') ?? ChatMessageGroupingPolicy.sameDay + '';

    this.bindValues();
  }

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

  private bindValues(): void {
    this.nightMode = AppStorage.getItem('style_mode') == 'dark';
    this.guides = this.guideService.isGuideSystemOn();

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

    this.selectedLang = AppStorage.getItem('lang');
    this.selectedMessageDisplay = AppStorage.getItem('messageDisplay') || 'cozy';

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

    var volume = AppStorage.getItem('volume');
    if (volume) this.volumeValue = parseFloat(volume);
  }

  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);
    AppStorage.setItem('lang', lang);
  }

  public changeChatGroupingPolicy(policy): void {
    this.selectedChatGroupingPolicy = policy;
    AppStorage.setItem('chatGroupingPolicy', policy);
  }

  public changeMessageDisplay(display): void {
    this.selectedMessageDisplay = display;
    AppStorage.setItem('messageDisplay', display);
  }

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

  public playTestSound(): void {
    if (this.cordovaService.isOnIOS()) {
      this.cordovaService.playNotificationSound();
    } else {
      this.audioService.playSound(Sounds.NOTIFICATION);
    }
  }
}
