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

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

import { ChatSetting } from '../models/settings';

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

  private readonly isDesktop = false;
  private readonly isBrowser = false;

  constructor(
    private enviromentsService: EnviromentsService,
    private changeDetectorRef: ChangeDetectorRef,
    private logger: NGXLogger
  ) {}

  ngOnInit() {}

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

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

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