import {
  Component,
  OnInit,
  Input,
  OnDestroy,
  Output,
  EventEmitter
} 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';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { StatusCode } from '@ucap-webmessenger/core';

import { PresenceType } from '../types/presence-type.type';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { MatCheckboxChange, MatPseudoCheckbox } from '@angular/material';

@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()
  set presence(value: StatusBulkInfo | StatusInfo) {
    this.userPresence = value;
  }
  @Input()
  checkable = false;
  @Input()
  isChecked = false;
  @Input()
  compactable = false;
  @Input()
  sessionVerinfo: VersionInfo2Response;
  @Input()
  /** 선택된 사용자의 리스트 */
  selectedUserList?: (UserInfo | UserInfoSS | UserInfoF | UserInfoDN)[] = [];

  @Output()
  checkUser = new EventEmitter<{
    isChecked: boolean;
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
  }>();

  userPresence: StatusBulkInfo | StatusInfo;
  PresenceType = PresenceType;

  // private profileImageRootSubscription: Subscription;

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

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

    this.profileImageRoot =
      this.profileImageRoot || this.sessionVerinfo.profileRoot;
  }

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

  getPresence(type: string): string {
    let status: string;
    let rtnClass = '';
    switch (type) {
      case 'pc':
        status = this.userPresence.pcStatus;
        break;
    }

    if (!!status) {
      switch (status) {
        case StatusCode.OnLine:
          rtnClass = type + 'On';
          break;
        case StatusCode.Away:
          rtnClass = type + 'Out';
          break;
        case StatusCode.Busy:
          rtnClass = type + 'Other';
          break;
        default:
          rtnClass = type + 'Off';
          break;
      }
    }

    return rtnClass;
  }

  onChangeCheck(
    value: boolean,
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
  ) {
    this.checkUser.emit({
      isChecked: value,
      userInfo
    });
  }
}