import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
import {
  UCAP_NATIVE_SERVICE,
  NativeService,
  WindowState,
  UpdateInfo
} from '@ucap-webmessenger/native';
import { Observable, Subscription } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as AuthenticationStore from '@app/store/account/authentication';
import * as SettingsStore from '@app/store/messenger/settings';
import * as UpdateStore from '@app/store/setting/update';

import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { tap } from 'rxjs/operators';
import {
  RightDrawer,
  KEY_URL_INFO,
  LoginInfo,
  KEY_LOGIN_INFO
} from '@app/types';
import {
  WebLink,
  DaesangUrlInfoResponse
} from '@ucap-webmessenger/api-external';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';

@Component({
  selector: 'app-layout-native-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.scss']
})
export class TopBarComponent implements OnInit, OnDestroy {
  windowStateChanged$: Observable<WindowState>;
  WindowState = WindowState;

  loginRes: LoginResponse;
  loginResSubscription: Subscription;

  updateInfo$: Observable<UpdateInfo>;

  showWeblink = false;
  loginInfo: LoginInfo;
  weblink: WebLink[] = [];

  constructor(
    private store: Store<any>,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    private sessionStorageService: SessionStorageService
  ) {
    this.loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
    const urlInfo: DaesangUrlInfoResponse = this.sessionStorageService.get<
      DaesangUrlInfoResponse
    >(KEY_URL_INFO);

    if (!!urlInfo.webLink) {
      this.weblink = urlInfo.webLink.filter(
        weblink =>
          urlInfo.webLinkAllowedList.filter(type => type === weblink.key)
            .length > 0
      );
    }
  }

  ngOnInit() {
    this.windowStateChanged$ = this.nativeService.windowStateChanged();

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

    this.updateInfo$ = this.store.pipe(
      select(AppStore.SettingSelector.UpdateSelector.updateInfo)
    );
  }

  ngOnDestroy(): void {}

  onClickClose() {
    this.nativeService.windowClose();
  }

  onClickMinimize() {
    this.nativeService.windowMinimize();
  }

  onClickMaxmize() {
    this.nativeService.windowMaximize();
  }

  onClickSettings(): void {
    this.store.dispatch(SettingsStore.showDialog());
  }

  onClickLogout(): void {
    this.store.dispatch(AuthenticationStore.logoutConfirmation());
  }

  onClickNotice(): void {
    this.store.dispatch(
      ChatStore.selectedRightDrawer({
        req: RightDrawer.Notice
      })
    );
  }

  onToggleWebLinkSelector(): void {
    this.showWeblink = !this.showWeblink;
  }
  onClickWebLink(link: WebLink): void {
    const loginPw = this.loginInfo.loginPw;
    const token = this.loginRes.tokenString;

    const url = link.url.replace('(%USER_TOKEN%)', token);

    this.nativeService.openDefaultBrowser(url);
  }

  onClickUpdate() {
    this.store.dispatch(UpdateStore.applyInstantUpdate());
  }
}