import {
  Component,
  OnInit,
  ChangeDetectorRef,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
  Inject
} from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { MatSelectChange } from '@angular/material/select';

import { EnviromentsService } from '@ucap-webmessenger/enviroments';

import { ChatSetting } from '../models/settings';
import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';

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

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

  // tslint:disable-next-line: variable-name
  readonly _isNodeWebkit: boolean;

  constructor(
    private enviromentsService: EnviromentsService,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    private changeDetectorRef: ChangeDetectorRef,
    private logger: NGXLogger
  ) {
    this._isNodeWebkit = this.enviromentsService.nodeWebkit();
  }

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

  onSelectionChangeFontFamily(event: MatSelectChange) {
    this.emit({ ...this.setting, fontFamily: event.value });
  }

  onSelectionChangeFontSize(event: MatSelectChange) {
    this.emit({ ...this.setting, fontSize: Number(event.value) });
  }

  onClickDownloadPath() {
    this.logger.debug('onClickDownloadPath');
    this.nativeService
      .selectDirectory()
      .then(path => {
        if (!!path && path.length > 0) {
          this.emit({ ...this.setting, downloadPath: path });
        }
      })
      .catch(reason => {});
  }

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