import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { StatusBulkInfo, StatusInfo } from '@ucap-webmessenger/protocol-status';
import { Store, select } from '@ngrx/store';
import * as AppStore from '@app/store';
import { Subscription } from 'rxjs';
import { NGXLogger } from 'ngx-logger';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'ucap-profile-user-list-item',
  templateUrl: './user-list-item.component.html',
  styleUrls: ['./user-list-item.component.scss']
})
export class UserListItemComponent implements OnInit, OnDestroy {
  @Input()
  userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
  @Input()
  profileImageRoot?: string;
  @Input()
  presence?: StatusBulkInfo | StatusInfo;
  @Input()
  checkable = false;
  @Input()
  compactable = false;

  private profileImageRootSubscription: Subscription;

  constructor(private store: Store<any>, private logger: NGXLogger) {}

  ngOnInit() {
    this.profileImageRootSubscription = this.store
      .pipe(
        select(AppStore.SettingSelector.VersionInfoSelector.profileImageRoot),
        tap(profileImageRoot => {
          this.profileImageRoot = this.profileImageRoot || profileImageRoot;
        })
      )
      .subscribe();
  }

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