import { Component, OnInit, ViewChild } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'account-edit.component.html',
  providers: [ApiService]
})
export class AccountEditComponent {
  settingForm: FormGroup;
  settingOrganisationForm: FormGroup;
  settingCustomerForm: FormGroup;
  accountType: any;
  @ViewChild('fileInput') fileInput;

  constructor(
  private http: Http,
	private formBuilder: FormBuilder,
	private api: ApiService,
	) {	
	  this.settingForm = this.formBuilder.group({
      email           : ['', [Validators.required]],
      postcode        : ['', [Validators.required]],
      password        : ['', [Validators.required]],
      new_password    : [''],
      profile_picture : [''],
	  }); 
    this.settingOrganisationForm = this.formBuilder.group({
      name         : ['', [Validators.required]],
      street_name  : ['', [Validators.required]],
      town         : ['', [Validators.required]],
	  });
    this.settingCustomerForm = this.formBuilder.group({
      full_name     : ['', [Validators.required]],
      display_name  : ['', [Validators.required]],
    });
  }
  
  ngOnInit(): void {
    this.api.accountFullLoad().subscribe(
      result => {
        console.log(result);
        this.settingForm.patchValue({
          email:        result.email,
          postcode:     result.postcode,
          password:     '',
          new_password: '',
        });
        this.settingOrganisationForm.patchValue({
          name:         result.name,
          street_name:  result.street_name,
          town:         result.town,
        });
        this.settingCustomerForm.patchValue({
          full_name:    result.full_name,
          display_name: result.display_name,
        });
        this.api.setUserInfo( result.email, result.display_name );
        this.accountType = ( result.name == null ? 'customer' : 'organisation' );
      },
      error => {
        console.log( error._body );
      }
    );
  }
  
  onSubmitOrganisation() {
	 console.log(this.settingForm.valid);
	if (!this.settingForm.valid && !this.settingOrganisationForm.valid) {
		console.log("Not Valid!");
		return;
	}
  
  let settingForm = this.settingForm.value;
	let settingOrganisationForm = this.settingOrganisationForm.value;
  
  // image upload code
  let fi = this.fileInput.nativeElement;
  let data = new FormData();
  
  if (fi.files && fi.files[0]) {
    let fileToUpload = fi.files[0];
    data.append("file", fileToUpload);
  }

  let submitData = {
    email:        settingForm.email,
    postcode:     settingForm.postcode,
    password:     settingForm.password,
    new_password: settingForm.new_password,
    name:         settingOrganisationForm.name,
    street_name:  settingOrganisationForm.street_name,
    town:         settingOrganisationForm.town,
  }
  
  data.append('form', JSON.stringify(submitData));
  
  console.log(data);
	this.api
    .accountEditUpdate(data)
    .subscribe(
      result => {
        console.log('data submitted!');
      },
      error => {
        console.log( error._body );
      }
    );
  }
  
  onSubmitCustomer() {
	 console.log(this.settingForm.valid);
	if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
		console.log("Not Valid!");
		return;
	}
  
  let settingForm = this.settingForm.value;
	let settingCustomerForm = this.settingCustomerForm.value;
	
  // image upload code
  let fi = this.fileInput.nativeElement;
  let data = new FormData();
  
  if (fi.files && fi.files[0]) {
    let fileToUpload = fi.files[0];
    data.append("file", fileToUpload);
  }

  let submitData = {
    email:        settingForm.email,
    postcode:     settingForm.postcode,
    password:     settingForm.password,
    new_password: settingForm.new_password,
    full_name:    settingCustomerForm.full_name,
    display_name: settingCustomerForm.display_name,
  }
  
  data.append('form', JSON.stringify(submitData));
  
	this.api
    .accountEditUpdate(data)
    .subscribe(
      result => {
        console.log('data submitted!');
      },
      error => {
        console.log( error._body );
      }
    );
  }

}