import { Subject } from 'rxjs';

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

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

import { UserInfo } from '@ucap/protocol-sync';
import { UserInfoSS, UserInfoF, UserInfoDN } from '@ucap/protocol-query';
import { UserInfo as RoomUserInfo } from '@ucap/protocol-room';
import { MatStepper } from '@angular/material/stepper';
import { I18nService } from '@ucap/ng-i18n';
import { GroupActions } from '@ucap/ng-store-group';
import {
  AlertDialogComponent,
  AlertDialogData,
  AlertDialogResult
} from '@ucap/ng-ui';
import { environment } from '@environments';
import { AppChatService } from '@app/services/app-chat.service';

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

export interface CreateDialogData {}
export interface CreateDialogResult {
  userSeqs: string[];
  isTimer: boolean | undefined;
}

@Component({
  selector: 'app-dialog-chat-create',
  templateUrl: './create.dialog.component.html',
  styleUrls: ['./create.dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CreateDialogComponent implements OnInit, OnDestroy {
  currentStep = 0;
  maxChatRoomUser: number;

  isTimer: boolean | undefined;
  selectedUserList: UserInfoTypes[] = [];

  constructor(
    public dialogRef: MatDialogRef<CreateDialogData, CreateDialogResult>,
    @Inject(MAT_DIALOG_DATA) public data: CreateDialogData,
    private i18nService: I18nService,
    public dialog: MatDialog,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    this.maxChatRoomUser = environment.productConfig.chat.maxChatRoomUser;
  }

  ngOnInit(): void {}

  ngOnDestroy(): void {}

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

  onCancel(stepper: MatStepper) {
    if (stepper.selectedIndex > 0) {
      stepper.previous();
      return;
    }
    this.dialogRef.close();
  }
  onConfirm(stepper: MatStepper) {
    // validation.
    if (this.isTimer === undefined) {
      this.dialog.open<
        AlertDialogComponent,
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
        data: {
          title: this.i18nService.t('errors.label'),
          html: this.i18nService.t('errors.emptyOpenRoomType', {
            maxCount: this.maxChatRoomUser
          })
        }
      });
      return;
    }
    stepper.next();
  }

  onOpenRoom(stepper: MatStepper) {
    const userSeqs: string[] = [];

    this.selectedUserList.map((user) => userSeqs.push(user.seq.toString()));

    if (this.selectedUserList.length >= this.maxChatRoomUser) {
      this.dialog.open<
        AlertDialogComponent,
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
        data: {
          title: this.i18nService.t('errors.label'),
          html: this.i18nService.t('errors.maxCountOfRoomMemberWith', {
            maxCount: this.maxChatRoomUser
          })
        }
      });
      return;
    }

    // Open Room.
    this.dialogRef.close({ userSeqs, isTimer: this.isTimer });
  }

  onChangeUserList(selectedUserList: UserInfoTypes[]) {
    this.selectedUserList = selectedUserList;
  }
}
