import { Component, OnInit, OnDestroy } from '@angular/core';

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

import { Company } from '@ucap-webmessenger/api-external';

import * as AppStore from '@app/store';
import * as AuthenticationStore from '@app/store/account/authentication';
import * as CompanyStore from '@app/store/setting/company';
import { Observable, Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { tap, map } from 'rxjs/operators';
import {
  DialogService,
  AlertDialogComponent,
  AlertDialogData,
  AlertDialogResult
} from '@ucap-webmessenger/ui';
import { StringUtil } from '@ucap-webmessenger/core';
import {
  NoticeDialogComponent,
  NoticeDialogResult,
  NoticeDialogData
} from '@app/layouts/messenger/dialogs/account/notice.dialog.component';

@Component({
  selector: 'app-page-account-login',
  templateUrl: './login.page.component.html',
  styleUrls: ['./login.page.component.scss']
})
export class LoginPageComponent implements OnInit, OnDestroy {
  companyList$: Observable<Company[]>;

  loginFailureCount: Subscription;

  defatulLoginBtnText: string;
  loginBtnText: string;
  loginBtnEnable: boolean;

  timeChecker: any;
  defatulWaitingTime: number;
  waitingTime: number;

  constructor(
    private store: Store<any>,
    private router: Router,
    private dialogService: DialogService
  ) {}

  ngOnInit(): void {
    this.defatulLoginBtnText = 'LOGIN';
    this.defatulWaitingTime = 5 * 60; // sec

    this.store.dispatch(
      CompanyStore.companyList({
        companyGroupCode: 'LG'
      })
    );

    this.companyList$ = this.store.pipe(
      select(AppStore.SettingSelector.CompanySelector.companyList)
    );

    this.loginFailureCount = this.store
      .pipe(
        select(AppStore.AccountSelector.AuthenticationSelector.loginFailCount),
        map(count => {
          if (count > 0) {
            if (count < 5) {
              this.dialogService.open<
                AlertDialogComponent,
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
                width: '360px',
                data: {
                  title: '로그인',
                  html: `아이디 또는 패스워드가<br/>일치하지 않습니다.`
                }
              });
            }

            if (count === 5) {
              this.dialogService.open<
                AlertDialogComponent,
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
                width: '360px',
                data: {
                  title: '로그인',
                  html: `비밀번호 오류 횟수 초과입니다.<br/>비밀번호를 확인하신 후<br/>잠시 후 다시 시작해 주세요.`
                }
              });

              this.timeChecker = setInterval(() => this.getCheckTime(), 1000);
            }
            return;
          } else {
            if (!!this.timeChecker) {
              clearInterval(this.timeChecker);
            }
            this.waitingTime = this.defatulWaitingTime;
            this.loginBtnText = this.defatulLoginBtnText;
            this.loginBtnEnable = true;
          }
        })
      )
      .subscribe();
  }

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

  getCheckTime() {
    if (this.waitingTime <= 0) {
      // reset.
      if (!!this.timeChecker) {
        clearInterval(this.timeChecker);
      }
      this.waitingTime = this.defatulWaitingTime;
      this.loginBtnText = this.defatulLoginBtnText;
      this.loginBtnEnable = true;
    } else {
      // wait.
      this.waitingTime = this.waitingTime - 1;

      this.loginBtnText = `${StringUtil.zeroFill(
        Math.floor(this.waitingTime / 60),
        2
      )}:${StringUtil.zeroFill(this.waitingTime % 60, 2)}`;
      this.loginBtnEnable = false;
    }
  }

  onLogin(value: {
    companyCode: string;
    loginId: string;
    loginPw: string;
    rememberMe: boolean;
    notValid: () => void;
  }) {
    this.store.dispatch(
      AuthenticationStore.webLogin({
        loginInfo: {
          companyCode: value.companyCode,
          companyGroupType: 'C',
          loginId: value.loginId,
          loginPw: value.loginPw
        },
        rememberMe: value.rememberMe
      })
    );
  }

  onClickNoti() {
    // For Daesang,,
    this.dialogService.open<
      NoticeDialogComponent,
      NoticeDialogData,
      NoticeDialogResult
    >(NoticeDialogComponent, {
      width: '500px',
      data: {
        title: '이용시 주의사항',
        html: `
<p>1. 메신저 계정/비밀번호를 타인에게 공유하지 않아야 합니다.</p>
<p>2. 회사 중요정보(고객정보 포함)를 업무상 필요한 인원에게 필요한 만큼만 공유해야 합니다.</p>
<p>3. 퇴근, 회의 등 자리를 비우는 경우 중요자료가 방치되지 않도록 주의하고, Clean Desk를 실천해야 합니다.</p>
<p>4. 메신저를 누군가 허락 없이 함부로 열람하고 그 내부 내용을 타인과 공유하지 않아야 합니다.</p>
<p>5. 공용PC에 메신저 사용 후 반드시 로그아웃 하시기 바랍니다.</p>
<p>6. 사내메신저는 업무용 협업도구입니다. 비업무용 소통을 자제하시기 바랍니다.</p>
<p>7. 업무상 인지한 정보(개인의 프라이버시 포함)나 일반인에게 공개되지 않은 회사기록을 통해 얻은 정보는 오직 회사의 이익을 위해서 활용하여야 하며 사외에 유출하거나 타인에게 알려주거나 업무 이외의 목적에 사용하여서는 아니 됩니다.</p>
`
      }
    });
  }

  // onClickTemplate() {
  //   this.router.navigate(['/template']);
  // }
}