import { Subject } from 'rxjs';

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

import { Store } from '@ngrx/store';

import {
  MatDialogRef,
  MAT_DIALOG_DATA,
  MatDialog
} from '@angular/material/dialog';

import { UserInfo, GroupDetailData } from '@ucap/protocol-sync';
import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
import { I18nService } from '@ucap/ng-i18n';

import { SelectUserDialogType, GroupUserDialaogType } from '@app/types';

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

export interface EditUserDialogData {
  title: string;
  type: GroupUserDialaogType;
  group: GroupDetailData;
  userInfo: UserInfoTypes;
}
export interface EditUserDialogResult {
  type: GroupUserDialaogType;
  groupName: string;
  group: GroupDetailData;
  selelctUserList?: UserInfoTypes[];
  selectGroupList?: GroupDetailData[];
}

@Component({
  selector: 'app-dialog-edit-user',
  templateUrl: './edit-user.dialog.component.html',
  styleUrls: ['./edit-user.dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditUserDialogComponent implements OnInit, OnDestroy {
  constructor(
    public dialogRef: MatDialogRef<EditUserDialogData, EditUserDialogResult>,
    @Inject(MAT_DIALOG_DATA) public data: EditUserDialogData,
    private changeDetectorRef: ChangeDetectorRef,
    private store: Store<any>,
    private i18nService: I18nService,
    public dialog: MatDialog
  ) {}

  private ngOnDestroySubject: Subject<void>;

  currentType: GroupUserDialaogType;
  selectedUserList: UserInfoTypes[] = [];
  selectedGroupList: GroupDetailData[] = [];
  groupName = '';
  SelectUserDialogType = SelectUserDialogType;
  ngOnInit(): void {
    this.ngOnDestroySubject = new Subject();

    this.selectedUserList.push(this.data.userInfo);
    this.currentType = this.data.type;
  }

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

  onClosed(event: MouseEvent): void {
    this.dialogRef.close();
  }

  onConfirm() {
    if (!!this.groupName && this.groupName.trim().localeCompare('') !== 0) {
      this.currentType = GroupUserDialaogType.Create;
    } else {
      this.groupName = undefined;
    }

    this.dialogRef.close({
      type: this.currentType,
      groupName: this.groupName,
      group: this.data.group,
      selelctUserList: this.selectedUserList,
      selectGroupList: this.selectedGroupList
    });
  }
  onChangeUserList(data: { checked: boolean; userInfo: UserInfoSS }) {
    const i = this.selectedUserList.findIndex(
      (u) => u.seq === data.userInfo.seq
    );

    if (data.checked) {
      if (-1 === i) {
        this.selectedUserList = [...this.selectedUserList, data.userInfo];
      }
    } else {
      if (-1 < i) {
        this.selectedUserList = this.selectedUserList.filter(
          (u) => u.seq !== data.userInfo.seq
        );
      }
    }
  }

  onChangeGroupList(selectedGroupList: GroupDetailData[]) {
    this.selectedGroupList = selectedGroupList;
  }

  onChangeGroupName(name: string) {
    this.groupName = name;
  }

  onRemovedProfileSelection(userInfo: UserInfo) {
    const i = this.selectedUserList.findIndex(
      (u) => (u.seq as any) === (userInfo.seq as any)
    );

    if (-1 < i) {
      this.selectedUserList = this.selectedUserList.filter(
        (u) => (u.seq as any) !== (userInfo.seq as any)
      );
    }
  }

  removableForSelection = (userInfo: UserInfo) => {
    return true;
  };

  colorForSelection = (userInfo: UserInfo) => {
    return 'accent';
  };
}
