import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
} from "@angular/core";
import { ResourceNode, ResourceType } from "../sidebar-data";
import { sideMenuActiveObserver } from "src/app/components/header/header.component";
import { RouterHandler } from "src/app/shared/services/router-handler.service";
import { AccountAvatarRecord } from "src/app/shared/server-services/query-records/account-records";
import { SubscriptionService } from "src/app/shared/server-services/subscription.service";
import {
  SubscriptionServiceEvent,
  SubscriptionServiceEventType,
} from "src/app/shared/server-services/subscription-event";
import { WorkspaceSubscriptionRoomEventRecord } from "src/app/shared/server-services/query-records/workspace-records";
import { RoomService } from "src/app/shared/server-services/room.service";
import { AccountService } from "src/app/shared/server-services/account.service";

@Component({
  selector: "app-resource-node",
  templateUrl: "./resource-node.component.html",
  styleUrls: ["./resource-node.component.scss"],
})
export class ResourceNodeComponent implements OnInit, OnDestroy {
  @Input() data: ResourceNode;

  public avatar: AccountAvatarRecord;
  public roomImage: ArrayBuffer;

  public activeMenu = false;
  public subPageToRedirect = "";

  // TODO implement
  public isNanoConnected: boolean = false;
  public isNanoCompeting: boolean = false;
  public isMyRoom: boolean = false;
  public isDialogue: boolean = false;

  public onRouterChange = (res) => {
    this.activeMenu = this.data.id == res?.params?.id;
  };

  constructor(
    private routerHandler: RouterHandler,
    private subscriptionService: SubscriptionService,
    private accountService: AccountService,
    private ref: ChangeDetectorRef
  ) {
    this.routerHandler.subscribeAll(this.onRouterChange);

    this.subscriptionService.subscribe(
      SubscriptionServiceEvent.ROOM_EVENT,
      SubscriptionServiceEventType.ALL,
      this.updateData.bind(this)
    );
  }

  private updateData(event: WorkspaceSubscriptionRoomEventRecord) {
    if (this.data.id == event.id) {
      this.refreshNanoSessionState();
      
      if (this.data.type == ResourceType.DIALOGUE) {
        this.avatar = <AccountAvatarRecord>this.data.avatar;
      } else {
        this.roomImage = <ArrayBuffer>this.data.avatar;
      }
    }
  }

  hideSidebar(): void {
    sideMenuActiveObserver.next(false);
  }

  ngOnInit(): void {
    if (this.routerHandler.isOnPage("room")) {
      this.activeMenu = this.data.id == this.routerHandler.getRoute().params.id;
    }

    if (this.data.type == ResourceType.DIALOGUE) {
      this.subPageToRedirect = "private";
      this.avatar = <AccountAvatarRecord>this.data.avatar;
    } else {
      this.subPageToRedirect = "room";
      this.roomImage = <ArrayBuffer>this.data.avatar;
    }

    if (this.data.type == ResourceType.ROOM){
      this.accountService.getMe().then((me) => {
        this.isMyRoom = this.data.owner == me.id;
      });
    }
    else{
      this.isDialogue = true;
    }
    

    this.refreshNanoSessionState();
  }

  private refreshNanoSessionState() {
    if (this.data.nanoSessions) {
      this.isNanoConnected = Object.keys(this.data.nanoSessions).length > 0;
      this.isNanoCompeting = Object.keys(this.data.nanoSessions).length > 1;
    }
  }

  ngOnDestroy() {
    this.routerHandler.unsubscribe("room", this.onRouterChange);
    this.subscriptionService.unsubscribe(
      SubscriptionServiceEvent.ROOM_EVENT,
      SubscriptionServiceEventType.ALL,
      this.updateData.bind(this)
    );
  }
}
