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

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

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

import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN,
  QueryProtocolService
} 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 { MatDrawer } from '@angular/material';
import { NGXLogger } from 'ngx-logger';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { DaesangProtocolService } from '@ucap-webmessenger/daesang';

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

  defaultLeftSideComponentWidth = 380;
  leftSideComponentWidth = this.defaultLeftSideComponentWidth;

  loginRes: LoginResponse;
  loginResSubscription: Subscription;

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

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

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

    this.idleStateChangedSubscription = this.nativeService
      .idleStateChanged()
      .subscribe(action => {
        this.logger.debug(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 }));
      });

    this.loginResSubscription = this.store
      .pipe(
        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
        tap(loginRes => {
          this.loginRes = loginRes;
        })
      )
      .subscribe();
  }

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

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

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

    this.logger.debug('-----------------------MainPageComponent ngOnDestroy');
  }

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

  onGutterDragEnd(e: { gutterNum: number; sizes: Array<number> }) {
    this.leftSideComponentWidth = e.sizes[0];
  }
  onGutterDblClick(e: { gutterNum: number; sizes: Array<number> }) {
    this.leftSideComponentWidth = this.defaultLeftSideComponentWidth;
  }

  onClickOpenProfile(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
    // [GROUP]
    // this.queryProtocolService
    //   .dataUser({
    //     divCd: 'OPENPROF',
    //     seq: userInfo.seq,
    //     senderCompanyCode: this.loginRes.userInfo.companyCode,
    //     senderEmployeeType: this.loginRes.userInfo.employeeType
    //   })
    //   .pipe(
    //     take(1),
    //     map(res => {
    //       if (!!res && !!res.userInfo) {
    //         this.dialogService.open<
    //           ProfileDialogComponent,
    //           ProfileDialogData,
    //           ProfileDialogResult
    //         >(ProfileDialogComponent, {
    //           data: {
    //             userInfo: res.userInfo
    //           }
    //         });
    //       }
    //     })
    //   )
    //   .subscribe();

    // [Daesang]
    this.daesangProtocolService
      .dataUserDaesang({
        divCd: 'OPENPROF',
        seq: userInfo.seq,
        senderCompanyCode: this.loginRes.userInfo.companyCode,
        senderEmployeeType: this.loginRes.userInfo.employeeType
      })
      .pipe(
        take(1),
        map(res => {
          console.log(res);
          if (!!res && !!res.userInfo) {
            this.dialogService.open<
              ProfileDialogComponent,
              ProfileDialogData,
              ProfileDialogResult
            >(ProfileDialogComponent, {
              data: {
                userInfo: res.userInfo
              }
            });
          }
        })
      )
      .subscribe();
  }

  onCloseRightDrawer() {
    this.rightDrawer.close();
  }
}