import {
  Component,
  OnInit,
  Input,
  EventEmitter,
  Output,
  ViewChild,
  ElementRef
} from '@angular/core';

import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import { UserInfoF } from '@ucap-webmessenger/protocol-query';
import { FileUploadItem } from '@ucap-webmessenger/api';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'ucap-profile-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
  @Input()
  profileImageRoot: string;
  @Input()
  isMe: boolean;
  @Input()
  isBuddy: boolean;
  @Input()
  isFavorit: boolean;
  @Input()
  userInfo: UserInfo | UserInfoF;

  @Output()
  openChat = new EventEmitter<UserInfo | UserInfoF>();
  @Output()
  toggleFavorit = new EventEmitter<{
    userInfo: UserInfo | UserInfoF;
    isFavorit: boolean;
  }>();
  @Output()
  toggleBuddy = new EventEmitter<{
    userInfo: UserInfo | UserInfoF;
    isBuddy: boolean;
  }>();

  @Output()
  uploadProfileImage = new EventEmitter<FileUploadItem>();

  @ViewChild('profileImageFileInput', { static: false })
  profileImageFileInput: ElementRef<HTMLInputElement>;

  userIntroFormControl = new FormControl('');

  profileImageFileUploadItem: FileUploadItem;

  constructor() {}

  ngOnInit() {}

  onClickOpenChat() {
    this.openChat.emit(this.userInfo);
  }

  onClickCall() {}

  onClickVideoConference() {}

  onClickMessage() {}

  onToggleFavorit() {
    this.isFavorit = !this.isFavorit;

    this.toggleFavorit.emit({
      userInfo: this.userInfo,
      isFavorit: this.isFavorit
    });
  }

  onClickAddBuddy() {
    this.toggleBuddy.emit({
      userInfo: this.userInfo,
      isBuddy: true
    });
  }

  onClickDelBuddy() {
    this.toggleBuddy.emit({
      userInfo: this.userInfo,
      isBuddy: false
    });
  }

  onChangeFileInput() {
    this.profileImageFileUploadItem = FileUploadItem.fromFiles(
      this.profileImageFileInput.nativeElement.files
    )[0];

    this.uploadProfileImage.emit(this.profileImageFileUploadItem);

    this.profileImageFileInput.nativeElement.value = '';
  }
}