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

@Component({
  selector: 'of-member-profile',
  templateUrl: './member-profile.component.html',
})
export class MemberProfileComponent implements OnInit, OnDestroy {
  @Input() member: Member;
  @Output() modify = new EventEmitter<Member>();

  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
  ) {
  }


  ngOnInit() {
    this.initForm();
  }

  ngOnDestroy() {
  }

  initForm() {
    this.form = this.formBuilder.group({
      'email': [this.member.email,
      [
        Validators.required,
        Validators.email
      ]],
      'name': [this.member.name, []],
      'companyName': [this.member.companyName, []],
      'phone': [this.member.phone, []],
    });
  }

  onSubmit() {
    const formValue = Object.assign({}, this.form.value);
    const member: Member = {
      email: this.member.email,
      name: formValue.name,
      phone: formValue.phone,
      companyName: formValue.companyName,
    };
    this.modify.emit(member);
  }

}