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

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

import { Company } from '@ucap-webmessenger/api-external';
import { ServerErrorCode, ProtocolService } from '@ucap-webmessenger/protocol';

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';

import { environment } from '../../../../environments/environment';
import {
  LocalStorageService,
  SessionStorageService
} from '@ucap-webmessenger/web-storage';
import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
import { AppAuthenticationService } from '@app/services/authentication.service';
import { logoutInitialize } from '@app/store/account/authentication';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-page-account-login',
  templateUrl: './login.page.component.html',
  styleUrls: ['./login.page.component.scss']
})
export class LoginPageComponent implements OnInit, OnDestroy {
  fixedCompany: string;
  fixedNotiBtnText: string;

  companyList$: Observable<Company[]>;

  loginFailureCount: Subscription;

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

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

  appUserInfo: AppUserInfo;
  useRememberMe: boolean;
  useAutoLogin: boolean;

  rotateInfomationIntervalObject: any;
  rotateInfomationIndex = 0;
  rotateInfomation = [
    {
      index: 0,
      content: `“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”`,
      info: `늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과 정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해, 건강한 식생활 문화를 다양한 곳으로 전달합니다.`
    },
    {
      index: 1,
      content: `“ 세계시장에 깊고 온화한 한국의 맛을 전파합니다! ”`,
      info: `대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출 성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의 새로운 장을 열었습니다.
       사람과 자연을 존중하는 대상의 기업정신에 한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를 내리고 있습니다.`
    },
    {
      index: 2,
      content: `“ 나눌수록 맛있는 행복을 전합니다 ”`,
      info: `다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을 다합니다.
       대상은 고객감동경영을 실천하고자 건강한 기업문화를 확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다.
        뿐만 아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한 사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록 맛있는 행복을 실천하고 있습니다`
    }
  ];

  constructor(
    private store: Store<any>,
    private router: Router,
    private translateService: TranslateService,
    private dialogService: DialogService,
    private protocolService: ProtocolService,
    private localStorageService: LocalStorageService,
    private sessionStorageService: SessionStorageService,
    private appAuthenticationService: AppAuthenticationService
  ) {
    this.useRememberMe =
      environment.productConfig.authentication.rememberMe.use;
    this.useAutoLogin = environment.productConfig.authentication.autoLogin.use;

    this.appUserInfo = this.localStorageService.encGet<AppUserInfo>(
      KEY_APP_USER_INFO,
      environment.customConfig.appKey
    );

    this.rotateInfomationIndex =
      new Date().getTime() % this.rotateInfomation.length;
  }

  ngOnInit(): void {
    // this.appAuthenticationService.logout();
    this.protocolService.disconnect();
    this.store.dispatch(logoutInitialize());

    this.rotateInfomationIntervalObject = setInterval(() => {
      this.rotateInfomationIndex =
        (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
    }, 8000);

    this.defatulLoginBtnText = this.translateService.instant('accounts.login');
    this.defatulWaitingTime = 5 * 60; // sec

    this.store.dispatch(
      CompanyStore.companyList({
        companyGroupCode: environment.companyConfig.companyGroupCode
      })
    );

    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: this.translateService.instant(
                    'accounts.errors.loginFail'
                  )
                }
              });
            }

            if (count === 5) {
              this.dialogService.open<
                AlertDialogComponent,
                AlertDialogData,
                AlertDialogResult
              >(AlertDialogComponent, {
                width: '360px',
                data: {
                  title: '',
                  html: this.translateService.instant(
                    'accounts.errors.loginFailOverTry'
                  )
                }
              });

              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();

    this.customInitilize();
  }

  async customInitilize() {
    const personLogout: LogoutInfo = this.sessionStorageService.get(
      KEY_LOGOUT_INFO
    );

    if (!!personLogout && !!personLogout.reasonCode) {
      let msg = this.translateService.instant('accounts.results.doLogout');
      switch (personLogout.reasonCode) {
        case ServerErrorCode.ERRCD_DUPLICATE:
          msg = this.translateService.instant(
            'accounts.results.doLogoutDuplicate',
            {
              ip: personLogout.ip,
              mac: personLogout.mac
            }
          );

          break;
        case ServerErrorCode.ERRCD_FORCE_INIT:
          msg = this.translateService.instant(
            'accounts.results.doLogoutByOthers'
          );
          break;
      }

      const result = this.dialogService.open<
        AlertDialogComponent,
        AlertDialogData,
        AlertDialogResult
      >(AlertDialogComponent, {
        width: '360px',
        data: {
          title: '',
          html: msg
        }
      });

      this.sessionStorageService.set<LogoutInfo>(KEY_LOGOUT_INFO, {
        personLogout: true
      } as LogoutInfo);
    }

    // Daesang..
    this.fixedCompany = environment.companyConfig.fixedCompanyCode;
    this.fixedNotiBtnText = this.translateService.instant(
      'accounts.usageNotes'
    );
  }

  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;
    autoLogin: boolean;
    notValid: () => void;
  }) {
    this.store.dispatch(
      AuthenticationStore.webLogin({
        loginInfo: {
          companyCode: value.companyCode,
          companyGroupType: 'C',
          loginId: value.loginId,
          loginPw: value.loginPw
        },
        rememberMe: value.rememberMe,
        autoLogin: value.autoLogin
      })
    );
  }

  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>
`
      }
    });
  }

  onClickNextInfomation() {
    this.rotateInfomationIndex =
      (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;

    if (!!this.rotateInfomationIntervalObject) {
      clearInterval(this.rotateInfomationIntervalObject);
      this.rotateInfomationIntervalObject = setInterval(() => {
        this.rotateInfomationIndex =
          (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
      }, 8000);
    }
  }

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