import { map, tap } from "rxjs/operators";
import { Component, OnInit, Inject, OnDestroy, ViewChild } from "@angular/core";

import { Store, select } from "@ngrx/store";

import * as AppSotre from "@app/store";
import * as ChatStore from "@app/store/messenger/chat";
import { Observable, Subscription } from "rxjs";
import {
  WindowIdle,
  UCAP_NATIVE_SERVICE,
  NativeService
} from "@ucap-webmessenger/native";

import { UserInfo } from "@ucap-webmessenger/protocol-sync";
import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN
} from "@ucap-webmessenger/protocol-query";
import { StatusProtocolService } from "@ucap-webmessenger/protocol-status";
import { StatusType, StatusCode } from "@ucap-webmessenger/core";
import { DialogService } from "@ucap-webmessenger/ui";
import {
  ProfileDialogComponent,
  ProfileDialogData,
  ProfileDialogResult
} from "@app/layouts/messenger/dialogs/profile/profile.dialog.component";
import { MatSidenav, MatDrawer } from "@angular/material";

@Component({
  selector: "app-page-messenger-main",
  templateUrl: "./main.page.component.html",
  styleUrls: ["./main.page.component.scss"]
})
export class MainPageComponent implements OnInit {
  selectedChat$: Observable<string | null>;
  selectedRightDrawer$: Observable<string | null>;
  idleStateChangedSubscription: Subscription;
  chatOpenRoomSubscription: Subscription;

  @ViewChild("rightDrawer", { static: true }) rightDrawer: MatDrawer;

  constructor(
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    private store: Store<any>,
    private statusProtocolService: StatusProtocolService,
    private dialogService: DialogService
  ) {}

  ngOnInit(): void {
    this.selectedChat$ = this.store.pipe(
      select(AppSotre.MessengerSelector.ChatSelector.selectedRoom),
      tap(selectedRoom => {
        if (!selectedRoom) {
          this.rightDrawer.close();
        }
        return selectedRoom;
      })
    );
    this.selectedRightDrawer$ = this.store.pipe(
      select(AppSotre.MessengerSelector.ChatSelector.selectedRightDrawer),
      tap(selectedRightDrawer => {
        if (!!selectedRightDrawer) {
          this.rightDrawer.open();
        } else {
          this.rightDrawer.close();
        }
      })
    );

    this.idleStateChangedSubscription = this.nativeService
      .idleStateChanged()
      .subscribe(action => {
        console.log(action);
        let statusType: StatusCode;

        if (action === "IDLE") {
          // away
          statusType = StatusCode.Away;
        } else {
          // online
          statusType = StatusCode.OnLine;
        }

        this.statusProtocolService.status({
          statusDivisionType: StatusType.Messenger,
          statusType,
          statusMessage: ""
        });
      });

    this.chatOpenRoomSubscription = this.nativeService
      .chatOpenRoom()
      .subscribe(roomSeq => {
        this.store.dispatch(ChatStore.selectedRoom({ roomSeq }));
      });
  }

  OnDestroy(): void {
    if (!!this.idleStateChangedSubscription) {
      this.idleStateChangedSubscription.unsubscribe();
    }

    if (!!this.chatOpenRoomSubscription) {
      this.chatOpenRoomSubscription.unsubscribe();
    }
  }

  onOpenedChange(event: boolean) {
    if (!event) {
      this.store.dispatch(
        ChatStore.selectedRightDrawer({
          req: null
        })
      );
    }
  }

  onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
    this.dialogService.open<
      ProfileDialogComponent,
      ProfileDialogData,
      ProfileDialogResult
    >(ProfileDialogComponent, {
      data: {
        userInfo
      }
    });
  }
}