import {
  Component,
  OnInit,
  ChangeDetectorRef,
  Input,
  Output,
  EventEmitter,
  OnDestroy
} from '@angular/core';
import { NotificationSetting } from '../models/settings';
import {
  MatRadioChange,
  MatSelectChange,
  MatCheckboxChange
} from '@angular/material';
import { NGXLogger } from 'ngx-logger';
import { NotificationMethod } from '@ucap-webmessenger/core';
import { TranslateService } from '@ngx-translate/core';
import { Subscription, merge } from 'rxjs';

@Component({
  selector: 'ucap-settings-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit, OnDestroy {
  @Input()
  setting: NotificationSetting;

  @Output()
  changed = new EventEmitter<NotificationSetting>();

  notificationMethodList: { type: NotificationMethod; name: string }[];
  langChangeSubscription: Subscription;

  NotificationMethod = NotificationMethod;

  constructor(
    private translateService: TranslateService,
    private changeDetectorRef: ChangeDetectorRef,
    private logger: NGXLogger
  ) {}

  ngOnInit() {
    this.logger.debug('setting', this.setting);

    this.setNotificationMethodList();

    this.langChangeSubscription = merge(
      this.translateService.onLangChange,
      this.translateService.onDefaultLangChange,
      this.translateService.onTranslationChange
    ).subscribe(() => {
      this.setNotificationMethodList();
    });
  }

  ngOnDestroy(): void {
    if (!!this.langChangeSubscription) {
      this.langChangeSubscription.unsubscribe();
    }
  }

  onChangeUse(event: MatRadioChange) {
    this.emit({ ...this.setting, use: 'true' === event.value ? true : false });
  }

  onSelectionChangeMethod(event: MatSelectChange) {
    this.emit({ ...this.setting, method: event.value });
  }

  onSelectionChangeAlertExposureTime(event: MatSelectChange) {
    this.emit({ ...this.setting, alertExposureTime: event.value });
  }

  onChangeReceiveForMobile(event: MatCheckboxChange) {
    this.emit({ ...this.setting, receiveForMobile: event.checked });
  }

  onChangeReceiveForMessage(event: MatCheckboxChange) {
    this.emit({ ...this.setting, receiveForMessage: event.checked });
  }

  private emit(setting: NotificationSetting) {
    this.setting = setting;
    this.changed.emit(this.setting);
  }

  private setNotificationMethodList() {
    const langs = this.translateService.instant([
      'settings.notification.methodTypeSound',
      'settings.notification.methodTypeAlert',
      'settings.notification.methodTypeSoundAndAlert'
    ]);

    this.notificationMethodList = [
      {
        type: NotificationMethod.Sound,
        name: langs['settings.notification.methodTypeSound']
      },
      {
        type: NotificationMethod.Alert,
        name: langs['settings.notification.methodTypeAlert']
      },
      {
        type: NotificationMethod.SoundAndAlert,
        name: langs['settings.notification.methodTypeSoundAndAlert']
      }
    ];
  }
}
