import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { PagesComponent } from 'app/pages/pages.component';

import * as AuthStore from '../../store/auth';
import * as ModifyStore from '../../store/modify';

import { Member } from '../../model';
import { AuthSelector } from '../../store';
import { Store } from '@ngrx/store';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'of-member-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  member: Member;
  modifyForm: FormGroup;

  constructor(
    public app: PagesComponent,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private store: Store<AuthStore.State>,
    private formBuilder: FormBuilder,
  ) {
  }


  ngOnInit() {
    this.store.select(AuthSelector.select('member')).subscribe(
      (member: Member) => {
        this.member = member;
      },
      (error) => {
        console.log(error);
      }
    );
    this.initForm();
  }

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

  modifyProfile() {
    const modifyValue = Object.assign({}, this.modifyForm.value);
    const member: Member = {
      email: this.member.email,
      name: modifyValue.name,
      phone: modifyValue.phone,
      companyName: modifyValue.companyName,
    };
    this.store.dispatch(new ModifyStore.Modify({member}));
    console.log(member);
  }

}