import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Input,
  EventEmitter,
  Output,
  ElementRef,
  Self
} from '@angular/core';
import { GroupDetailData } from '@ucap/protocol-sync';
import { UserInfoSS, UserInfoF } from '@ucap/protocol-query';

import { I18nService } from '@ucap/ng-i18n';
import { ucapAnimations } from '@ucap/ng-ui';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { select, Store } from '@ngrx/store';
import {
  ConfigurationSelector,
  LoginSelector
} from '@ucap/ng-store-authentication';
import { VersionInfo2Response } from '@ucap/api-public';
import { LoginResponse } from '@ucap/protocol-authentication';

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

  @Input()
  group: GroupDetailData;

  @Input()
  checkable = false;

  @Input()
  isMe = false;

  @Input()
  checked = false;

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

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

  @Input()
  isShow = false;
  @Input()
  isDialog = false;
  @Input()
  isClickMore = false;

  private ngOnDestroySubject: Subject<void>;

  loginRes: LoginResponse;
  versionInfo2Res: VersionInfo2Response;

  tempRect: any;

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

  ngOnInit(): void {
    this.ngOnDestroySubject = new Subject();

    this.store
      .pipe(
        takeUntil(this.ngOnDestroySubject),
        select(ConfigurationSelector.versionInfo2Response)
      )
      .subscribe((versionInfo2Res) => {
        this.versionInfo2Res = versionInfo2Res;
      });

    this.store
      .pipe(takeUntil(this.ngOnDestroySubject), select(LoginSelector.loginRes))
      .subscribe((loginRes) => {
        this.loginRes = loginRes;
      });

    this.tempRect = this.elementRef.nativeElement.getBoundingClientRect();
  }

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

  onOpenProfile(userInfo: UserInfoSS): void {
    alert('Open Profile');
  }

  onChangeCheckUser(param: { checked: boolean; userInfo: UserInfoF }) {
    this.changeCheckUser.emit(param);
  }

  onMouseover(event: MouseEvent): void {
    if (!this.isMe && !this.isDialog) {
      this.isShow = true;
    }
    event.preventDefault();
    event.stopPropagation();
  }
  onMouseleave(event: MouseEvent): void {
    if (!this.isMe && !this.isDialog) {
      this.isShow = false;
    }

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

  onClickProfileContextMenu(event: MouseEvent, type: string) {}

  onClickMore(event: MouseEvent) {
    this.isClickMore = true;

    const rect = this.elementRef.nativeElement.getBoundingClientRect();

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

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