import { Component, OnInit, Inject, OnDestroy, ViewChild } from '@angular/core';
import {
  UCAP_NATIVE_SERVICE,
  NativeService,
  WindowState,
  UpdateInfo
} from '@ucap-webmessenger/native';
import { Observable, Subscription, of } 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, take, map, catchError } from 'rxjs/operators';
import {
  RightDrawer,
  KEY_URL_INFO,
  LoginInfo,
  KEY_LOGIN_INFO,
  KEY_LOGIN_RES_INFO
} from '@app/types';
import {
  WebLink,
  DaesangUrlInfoResponse
} from '@ucap-webmessenger/api-external';
import {
  SessionStorageService,
  LocalStorageService
} from '@ucap-webmessenger/web-storage';
import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
import { environment } from '../../../../environments/environment';
import { DaesangApiService } from '@ucap-webmessenger/daesang';

@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;
  appUserInfo: AppUserInfo;

  updateInfo$: Observable<UpdateInfo>;

  showWeblink = false;
  loginInfo: LoginInfo;
  weblink: WebLink[] = [];
  webLinkBadgeMail = 0;
  webLinkBadgePayment = 0;

  constructor(
    private store: Store<any>,
    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
    private localStorageService: LocalStorageService,
    private sessionStorageService: SessionStorageService,
    private daesangApiService: DaesangApiService
  ) {
    this.appUserInfo = this.localStorageService.encGet<AppUserInfo>(
      KEY_APP_USER_INFO,
      environment.customConfig.appKey
    );
  }

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

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

          this.loginInfo = this.sessionStorageService.get<LoginInfo>(
            KEY_LOGIN_INFO
          );

          // WebLink init..
          this.initWebLink();
        })
      )
      .subscribe();

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

  initWebLink(): void {
    const loginRes = this.sessionStorageService.get<LoginResponse>(
      KEY_LOGIN_RES_INFO
    );

    const urlInfo: DaesangUrlInfoResponse = this.sessionStorageService.get<
      DaesangUrlInfoResponse
    >(KEY_URL_INFO);

    if (!!urlInfo && !!urlInfo.webLink) {
      // urlInfo.webLinkAllowedList.push(
      //   ...[
      //     'WebLinkMail',
      //     'WebLinkMailCnt',
      //     'WebLinkPayment',
      //     'WebLinkPaymentCnt'
      //   ]
      // );

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

      if (
        urlInfo.webLinkAllowedList.indexOf('WebLinkMail') > -1 &&
        urlInfo.webLinkAllowedList.indexOf('WebLinkMailCnt') > -1
      ) {
        // 메일 카운트 체크.
        const link = urlInfo.webLink.filter(
          weblink => weblink.key === 'WebLinkMailCnt'
        );
        if (link.length > 0) {
          const WebLinkMailCnt = link[0];
          const loginPw = this.appUserInfo.loginPw;
          const loginPw2 = this.loginInfo.loginPw;
          const loginId = this.loginInfo.loginId;
          const token = loginRes.tokenString;

          const url = WebLinkMailCnt.url
            .replace(/(\(%USER_TOKEN%\))/g, token)
            .replace(/(\(%USER_ID%\))/g, loginId)
            .replace(/(\(%USER_PASS%\))/g, loginPw);

          this.daesangApiService
            .retrieveMailCount(url)
            .pipe(
              take(1),
              map(res => (this.webLinkBadgeMail = res.count)),
              catchError(error => of(console.log(error)))
            )
            .subscribe();
        }
      }
      if (
        urlInfo.webLinkAllowedList.indexOf('WebLinkPayment') > -1 &&
        urlInfo.webLinkAllowedList.indexOf('WebLinkPaymentCnt') > -1
      ) {
        // 결제 카운트 체크.
        const link = urlInfo.webLink.filter(
          weblink => weblink.key === 'WebLinkPaymentCnt'
        );
        if (link.length > 0) {
          const WebLinkPaymentCnt = link[0];
          const WebLinkMailCnt = link[0];
          const loginPw = this.appUserInfo.loginPw;
          const loginPw2 = this.loginInfo.loginPw;
          const loginId = this.loginInfo.loginId;
          const token = loginRes.tokenString;

          const url = WebLinkMailCnt.url
            .replace(/(\(%USER_TOKEN%\))/g, token)
            .replace(/(\(%USER_ID%\))/g, loginId)
            .replace(/(\(%USER_PASS%\))/g, loginPw);

          this.daesangApiService
            .retrievePaymentCount(url)
            .pipe(
              take(1),
              map(res => {
                this.webLinkBadgePayment = res.count;
              }),
              catchError(error => of(console.log(error)))
            )
            .subscribe();
        }
      }
    }
  }

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

  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.appUserInfo.loginPw;
    const loginPw2 = this.loginInfo.loginPw;
    const loginId = this.loginInfo.loginId;
    const token = this.loginRes.tokenString;

    const url = link.url
      .replace(/(\(%USER_TOKEN%\))/g, token)
      .replace(/(\(%USER_ID%\))/g, loginId)
      .replace(/(\(%USER_PASS%\))/g, loginPw);

    this.nativeService.openDefaultBrowser(url);
  }
  getShowWebLinkbadge(link: WebLink): boolean {
    const showType = [
      'WebLinkMail',
      'WebLinkMailCnt',
      'WebLinkPayment',
      'WebLinkPaymentCnt'
    ];

    if (showType.indexOf(link.key) > -1) {
      return false;
    } else {
      return true;
    }
  }
  getWebLinkBadgeCount(link: WebLink): number {
    if (link.key === 'WebLinkMail') {
      return this.webLinkBadgeMail;
    } else if (link.key === 'WebLinkPayment') {
      return this.webLinkBadgePayment;
    } else {
      return 0;
    }
  }

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