import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

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

import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { DomainMember } from '@overflow/commons-typescript/model/domain';
import { Member } from '@overflow/commons-typescript/model/member';
import * as AuthStore from '@overflow/shared/auth/store/auth';

import {AuthSelector} from '../../shared/auth/store';

@Component({
  selector: 'of-member-totp',
  templateUrl: './member-totp.component.html',
})
export class MemberTotpComponent implements OnInit {
  domainMember: DomainMember;
  totp;
  // @Output() regist = new EventEmitter<{ member: Member, code: string, secretCode: string }>();
  // @Output() create = new EventEmitter<Member>();

  pending$: Observable<boolean>;
  error$: Observable<any>;

  selectedItem: any;
  totpSettingDisplay = false;
  headerItem: string;

  totpCode: string;

  lists = [];

  constructor(
    private store: Store<any>,
  ) { }

  ngOnInit() {
    this.store.select(AuthSelector.selectDomainMember).subscribe(
      (domainMember: DomainMember) => {
        this.domainMember = domainMember;
      }
    );
    this.lists = [
      { id: 1, name: 'Email', value: this.domainMember.member.email, description: 'blabla', },
      { id: 2, name: 'Phone', value: this.domainMember.member.phone, description: 'blabla', },
      { id: 3, name: 'Google 2factor', value: this.domainMember.member.totpType, description: 'blabla', },
    ];
  }

  on2factorConfig(event: Event, item: any) {
    this.selectedItem = item;

    // server totp regist member info modify
    if (this.selectedItem.id === 3) {
      this.headerItem = '구글 인증기 설정하기';
      this.totpSettingDisplay = true;
      // this.create.emit(this.domainMember.member);
    }
  }

  totpInput(e) {
    if (e.target.value.length >= 6) {
      // this.regist.emit(e.target.value);
    }
    return;
  }

}