import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Input,
  EventEmitter,
  Output,
  ElementRef,
  Self
} from '@angular/core';
import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
import { StatusBulkInfo, StatusInfo } from '@ucap/protocol-status';
import { PresenceType, StatusCode } from '@ucap/core';
import { I18nService } from '@ucap/ng-i18n';
import { ucapAnimations } from '@ucap/ng-ui';

export type UserInfoTypes =
  | UserInfo
  | UserInfoSS
  | UserInfoF
  | UserInfoDN
  | RoomUserInfo;

@Component({
  selector: 'app-group-profile-list-item',
  templateUrl: './profile-list-item.component.html',
  styleUrls: ['./profile-list-item.component.scss'],
  animations: ucapAnimations,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileListItemComponent implements OnInit, OnDestroy {
  @Input()
  userInfo: UserInfoF;

  @Input()
  group: GroupDetailData;

  @Input()
  isSearchData = false;

  @Input()
  defaultProfileImage: string;

  @Input()
  profileImageRoot: string;

  @Input()
  set presence(info: StatusBulkInfo | StatusInfo) {
    this._presence = info;
  }
  get presence(): StatusBulkInfo | StatusInfo {
    return this._presence;
  }
  _presence: StatusBulkInfo | StatusInfo;

  @Input()
  showMenu = true;

  @Input()
  checkable = false;
  @Input()
  set isChecked(checked: boolean) {
    this._isChecked = checked;
  }

  get isChecked(): boolean {
    return this._isChecked;
  }
  _isChecked = false;

  @Output()
  checked = new EventEmitter<{
    isChecked: boolean;
    userInfo: UserInfoTypes;
  }>();

  @Output()
  moreMenu: EventEmitter<{
    event: MouseEvent;
    userInfo: UserInfoTypes;
    group: GroupDetailData;
    rect: any;
  }> = new EventEmitter();

  isClicked = false;
  isShowMenu = false;

  @Input()
  isMe = false;

  PresenceType = PresenceType;
  isClickMore = false;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private i18nService: I18nService,
    @Self() private elementRef: ElementRef
  ) {
    this.i18nService.setDefaultNamespace('organization');
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {}

  onClickProfileImage(event: Event, userInfo: UserInfoTypes): void {}

  onChangeCheck(value: boolean, userInfo: UserInfoTypes) {
    this.checked.emit({
      isChecked: value,
      userInfo
    });
  }

  getPresence(type: PresenceType): string {
    let status: string;
    let rtnClass = '';
    switch (type) {
      case PresenceType.PC:
        status = !!this.presence ? this.presence.pcStatus : undefined;
        break;
      case PresenceType.MOBILE:
        status = !!this.presence ? this.presence.mobileStatus : undefined;
        break;
    }

    switch (status) {
      case StatusCode.OnLine:
        rtnClass = 'online';
        break;
      case StatusCode.Away:
        rtnClass = 'absence';
        break;
      case StatusCode.Busy:
        rtnClass = 'other-business';
        break;
      default:
        rtnClass = 'offline';
        break;
    }

    return rtnClass;
  }

  getPresenceMsg(): string {
    let presenceMsg = this.i18nService.t('presence.offline');

    if (!!this.presence) {
      switch (this.presence.pcStatus) {
        case StatusCode.OnLine:
          presenceMsg = this.i18nService.t('presence.online');
          break;
        case StatusCode.Away:
          presenceMsg = this.i18nService.t('presence.away');
          break;
        case StatusCode.Busy:
          if (
            !!this.presence.statusMessage &&
            this.presence.statusMessage !== '.'
          ) {
            presenceMsg = this.presence.statusMessage;
          } else {
            presenceMsg = this.i18nService.t('presence.statusMessage1');
          }
          break;
      }
    }

    return presenceMsg;
  }

  onClickMore(event: MouseEvent) {
    this.isClickMore = true;
    const rect = this.elementRef.nativeElement.getBoundingClientRect();

    this.moreMenu.emit({
      event,
      userInfo: this.userInfo,
      group: this.group,
      rect
    });
  }

  onClickProfileContextMenu(event: MouseEvent, type: string) {}
  onClickProfile(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();
    if (this.showMenu && !this.isMe) {
      this.isShowMenu = true;
    }
  }
  onMouseover(event: MouseEvent): void {
    if (this.showMenu && !this.isMe) {
      this.isShowMenu = true;
      if (this.isClickMore) {
        this.isClickMore = false;
      }
    }
    event.preventDefault();
    event.stopPropagation();
  }
  onMouseleave(event: MouseEvent): void {
    if (this.showMenu && !this.isMe) {
      this.isShowMenu = false;
    }

    event.preventDefault();
    event.stopPropagation();
  }
}