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

import { Store, select } from '@ngrx/store';
import { takeUntil, map, catchError } from 'rxjs/operators';

import { Subject, combineLatest, of } from 'rxjs';
import { AppAuthenticationService } from '@app/services/app-authentication.service';
import { SelectUserDialogType } from '@app/types';
import { QueryProtocolService } from '@ucap/ng-protocol-query';

import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN,
  DeptSearchType
} from '@ucap/protocol-query';
import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
import { LoginResponse } from '@ucap/protocol-authentication';
import { LoginSelector } from '@ucap/ng-store-authentication';
import { SearchData } from '@app/ucap/organization/models/search-data';

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

@Component({
  selector: 'app-group-select-user',
  templateUrl: './select-user.section.component.html',
  styleUrls: ['./select-user.section.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectUserSectionComponent implements OnInit, OnDestroy {
  breadcrumbs: any = [
    {
      label: 'LGCNS'
    },
    {
      label: 'IT Helpdesk'
    },
    {
      label: 'Issue Log'
    }
  ];

  @Input()
  isDialog = false;

  @Input()
  existUsers: UserInfoTypes[];

  @Input()
  isSelectionOff = true;

  @Input()
  checkable = false;

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

  @Output()
  toggleCheckGroup: EventEmitter<{
    isChecked: boolean;
    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
  }> = new EventEmitter();

  @Output()
  cancel = new EventEmitter();

  @Output()
  confirm = new EventEmitter();

  set companySearchData(searchData: SearchData) {
    this._companySearchData = searchData;

    this.onChangedCompanySearch();
  }
  get companySearchData() {
    return this._companySearchData;
  }
  // tslint:disable-next-line: variable-name
  _companySearchData: SearchData;

  isSearch = false;
  searchWord: string;

  private ngOnDestroySubject = new Subject<boolean>();

  @Input()
  selectedUserList: UserInfoTypes[] = [];
  searchUserInfos: UserInfoSS[] = [];

  loginRes: LoginResponse;

  SelectUserDialogType = SelectUserDialogType;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private store: Store<any>,
    private appAuthenticationService: AppAuthenticationService,
    private queryProtocolService: QueryProtocolService
  ) {}

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

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

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

  onToggleCheckGroup(params: {
    isChecked: boolean;
    groupBuddyList: { group: GroupDetailData; buddyList: UserInfo[] };
  }) {
    this.toggleCheckGroup.emit(params);
  }

  onToggleCheckUser(data: { checked: boolean; userInfo: UserInfoSS }) {
    this.toggleCheckUser.emit(data);
  }

  getCheckedUser(userInfo: UserInfoTypes) {
    if (!!this.selectedUserList && this.selectedUserList.length > 0) {
      return (
        this.selectedUserList.filter((item) => item.seq === userInfo.seq)
          .length > 0
      );
    }
    return false;
  }

  onChangedCompanySearch() {
    this.isSearch = true;
  }

  onCanceled() {
    this.isSearch = false;
  }
}
