import {
  Component,
  OnDestroy,
  OnInit,
  Output,
  EventEmitter,
} from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';

@Component({
  selector: 'of-member-signup',
  templateUrl: './member-signup.component.html',
})
export class MemberSignupComponent implements OnInit, OnDestroy {
  @Output() signup = new EventEmitter<{member: Member, password: string}>();

  myRecaptcha = new FormControl(false);

  signupForm: FormGroup;
  email: AbstractControl;
  password: AbstractControl;
  pwConfirm: AbstractControl;
  name: AbstractControl;
  phone: AbstractControl;
  company: AbstractControl;
  termsDisplay = false;
  policyDisplay = false;

  constructor(
    private formBuilder: FormBuilder,
  ) { }


  ngOnInit() {
    this.initForm();
  }

  ngOnDestroy() {
  }

  initForm() {
    this.signupForm = this.formBuilder.group({
      'email': [
        'geekhot@hotmail.co.kr',
        [
          Validators.required,
          Validators.email
        ]
      ],
      'password': [
        '!@#$Qwer1234',
        [
          Validators.required,
          Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
          Validators.minLength(6),
          Validators.maxLength(25),
        ]
      ],
      'pwConfirm': [
        '!@#$Qwer1234',
        [
          Validators.compose([
          Validators.required, this.pwMatchValidator
        ])
        ]
      ],
      'name': [
        'Park',
        [
          Validators.required
        ]
      ],
      'phone': [
        '010-3040-0303',
        [
          Validators.required
        ]
      ],
      'company': [
        'atgame',
        [
          Validators.required
        ]
      ],
    });
    this.email = this.signupForm.controls['email'];
    this.password = this.signupForm.controls['password'];
    this.pwConfirm = this.signupForm.controls['pwConfirm'];
    this.name = this.signupForm.controls['name'];
    this.phone = this.signupForm.controls['phone'];
    this.company = this.signupForm.controls['company'];
  }

  pwMatchValidator(control: FormControl): { [s: string]: boolean } {
    let pw;
    if (control.parent) {
      pw = control.parent.controls['password'].value;
    }
    if (control.value !== pw) {
      return { notMatched: true };
    }
  }

  signupFormSubmit() {
    if (!this.myRecaptcha.valid) {
      console.log('dddddddd');
      return;
    }
    const signupValue = Object.assign({}, this.signupForm.value);
    const password = signupValue.password;
    const member: Member = {
      email: signupValue.email,
      name: signupValue.name,
      phone: signupValue.phone,
      companyName: signupValue.company,
    };
    this.signup.emit({member: member, password: password});
  }

  termsDisplayOpen() {
    this.termsDisplay = true;
  }
  onTermsDisplayClose() {
    this.termsDisplay = false;
  }

  policyDisplayOpen() {
    this.policyDisplay = true;
  }

  onPolicyDisplayClose() {
    this.policyDisplay = false;
  }

  onScriptLoad() {
    console.log('Google reCAPTCHA loaded and is ready for use!');
  }

  onScriptError() {
    console.log('Something went long when loading the Google reCAPTCHA');
  }
}