import {
  Component,
  OnInit,
  ChangeDetectorRef,
  Output,
  EventEmitter,
  Input,
  ViewChild
} from '@angular/core';
import {
  MatTabChangeEvent,
  MatTabGroup,
  MatCheckboxChange,
  MatSelectChange
} from '@angular/material';
import { GeneralSetting } from '../models/settings';

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

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

  @ViewChild('themeTabGroup', { static: true })
  themeTabGroup: MatTabGroup;

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    let themeIndex;
    switch (this.setting.appTheme) {
      case 'theme-default':
        themeIndex = 0;
        break;
      case 'theme-lgRed':
        themeIndex = 1;
        break;
      default:
        themeIndex = 0;
        break;
    }
    this.themeTabGroup.selectedIndex = themeIndex;
  }

  onSelectedTabChange(e: MatTabChangeEvent) {
    let theme = 'theme-default';
    switch (e.index) {
      case 0:
        theme = 'theme-default';
        break;
      case 1:
        theme = 'theme-lgRed';
        break;
      default:
        break;
    }

    this.emit({ ...this.setting, appTheme: theme });
  }

  onChangeAutoStart(event: MatCheckboxChange) {
    this.emit({ ...this.setting, autoStart: event.checked });
  }
  onChangeStartBackgroudMode(event: MatCheckboxChange) {
    this.emit({ ...this.setting, startBackgroudMode: event.checked });
  }
  onChangeContinueRunWhenClose(event: MatCheckboxChange) {
    this.emit({ ...this.setting, continueRunWhenClose: event.checked });
  }
  onChangeAutoLogin(event: MatCheckboxChange) {
    this.emit({ ...this.setting, autoLogin: event.checked });
  }

  onSelectionChangeLocale(event: MatSelectChange) {
    this.emit({ ...this.setting, locale: event.value });
  }

  onSelectionChangeTimezone(event: MatSelectChange) {
    this.emit({ ...this.setting, timezone: event.value });
  }

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