import { Subject, of } from 'rxjs';

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

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

import {
  MatDialogRef,
  MAT_DIALOG_DATA,
  MatDialog,
  MatDialogConfig
} 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 {
  AlertDialogComponent,
  AlertDialogData,
  AlertDialogResult
} from '@ucap/ng-ui';
import { take, map, catchError } from 'rxjs/operators';
import { GroupActions } from '@ucap/ng-store-group';

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

export interface EditNameDialogData {
  title: string;
  group: GroupDetailData;
  left: number;
  top: number;
  idx: number;
}
export interface EditNameDialogResult {}

@Component({
  selector: 'app-dialog-group-edit-name',
  templateUrl: './edit-name.dialog.component.html',
  styleUrls: ['./edit-name.dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditNameDialogComponent implements OnInit, OnDestroy {
  constructor(
    public dialogRef: MatDialogRef<EditNameDialogData, EditNameDialogResult>,
    @Inject(MAT_DIALOG_DATA) public data: EditNameDialogData,

    private store: Store<any>,
    private i18nService: I18nService,
    public dialog: MatDialog
  ) {}

  private ngOnDestroySubject: Subject<void>;

  ngOnInit(): void {
    const matDialogConfig: MatDialogConfig = new MatDialogConfig();

    matDialogConfig.position = {
      left: `${this.data.left}px`,
      top: `${this.data.top + 50}px`
    };

    this.dialogRef.updatePosition(matDialogConfig.position);

    this.ngOnDestroySubject = new Subject();
  }

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

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

  onApplyEditGroupName(groupName: string) {
    if (groupName.localeCompare(this.data.group.name) === 0) {
      this.dialogRef.close();
      return;
    }
    if (groupName.localeCompare('') === 0) {
      const dialogRef = this.dialog.open<
        AlertDialogComponent,
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
        data: {
          title: this.i18nService.t('moreMenu.error.label'),
          html: this.i18nService.t('moreMenu.error.requireName')
        }
      });
      dialogRef
        .afterClosed()
        .pipe(
          take(1),
          map((result) => {}),
          catchError((err) => {
            return of(err);
          })
        )
        .subscribe();
      return;
    }
    this.store.dispatch(
      GroupActions.update({
        req: {
          groupSeq: this.data.group.seq,
          groupName,
          userSeqs: this.data.group.userSeqs
        }
      })
    );
    this.dialogRef.close();
  }
  onCompleteConfirm() {}
}