import { Subject } from 'rxjs';

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Output,
  EventEmitter,
  Input,
  ElementRef,
  Self
} from '@angular/core';

import { LogService } from '@ucap/ng-logger';
import { UserInfoTypes } from '@app/types';
import { GroupDetailData } from '@ucap/protocol-sync';
import { AuthResponse } from '@ucap/protocol-query';
import { ProfileMenuType } from '@ucap/ng-ui-organization';
@Component({
  selector: 'app-group-profile-menu-01',
  templateUrl: './profile-menu-01.component.html',
  styleUrls: ['./profile-menu-01.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileMenu01Component implements OnInit, OnDestroy {
  @Input()
  menuButtonType: string;

  @Input()
  authRes: AuthResponse;

  @Input()
  userInfo: UserInfoTypes;

  @Input()
  groupInfo: GroupDetailData;

  @Input()
  isShowMoreMenu: boolean;

  @Input()
  isMe: boolean;

  @Input()
  isShowForce: boolean;

  @Output()
  clickProfileMenu = new EventEmitter<{
    menuType: ProfileMenuType;
    userInfo: UserInfoTypes;
  }>();

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

  private ngOnDestroySubject: Subject<void> = new Subject();

  ProfileMenuType = ProfileMenuType;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    @Self() private elementRef: ElementRef,
    private logService: LogService
  ) {}

  ngOnInit(): void {}

  ngOnDestroy(): void {
    if (!!this.ngOnDestroySubject) {
      this.ngOnDestroySubject.next();
      this.ngOnDestroySubject.complete();
    }
  }

  onClickProfileMenu(event: MouseEvent, menuType: ProfileMenuType) {
    event.stopPropagation();
    this.clickProfileMenu.emit({ menuType, userInfo: this.userInfo });
  }

  onClickMoreMenu(event: MouseEvent) {
    event.stopPropagation();
    const rect = this.elementRef.nativeElement.getBoundingClientRect();

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