import { Component, ViewEncapsulation, Injector, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

import { ViewChild } from '@angular/core';

import { Config } from './../shared/config';

import { User } from './../shared/user/user';
import { UserService } from './../shared/user/user.service';

import { Subscription } from 'rxjs';

@Component({
  selector: '[profile]',
  templateUrl: './profile.template.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./profile.style.scss']
})
export class Profile implements OnInit {
  user: User = new User();
  editing: boolean = false;
  userForm: FormGroup;
  public busy: Subscription;
  alerts: Array<{type: string, msg: string}>;

  constructor(injector: Injector,
    private router: Router,
    private route: ActivatedRoute,
    private fb: FormBuilder,
    private userService: UserService) {

    console.log("User Profile");
    this.alerts = [];
  }

  createUserForm() {

    this.userForm = this.fb.group({
      uid: '',
      user_name: ['', Validators.required],
      email_address: ['', Validators.required],
      first_name: '',
      last_name: '',
      display_name: '',
      phone_number: '',
      mobile_number: '',
      user_settings: '',
      gender: '',
      dob: '',
      avatar_image_url: '',
      passwords: this.fb.group({
        password: ['', Validators.minLength(8)],
        confirm_password: ['', Validators.minLength(8)],
      }, { validator: this.passwordConfirming }),


      inspector: this.fb.group({
        uid: '',
        name: '',
        rfc: '',
        razon_social: '',
        contact_phone: '',
        contact_name: '',
        email_address: '',
        inspector_type: '',
        bank_account_holder: '',
        bank_account_number: '',
        bank_clabe: '',
        bank_name: '',

        address: this.fb.group({
          name: '',
          street: '',
          ext_number: '',
          int_number: '',
          neighborhood: '',
          community: '',
          district: '',
          city: '',
          state: '',
          zipcode: '',
          country_desc: '',
          reference: '',
          phone_work: '',
          phone_other: ''

        })

      })

    });

    // fill form values
    this.userForm.patchValue(this.user);
    this.onChanges();

  }

  onChanges(): void {
    this.userForm.get('first_name').valueChanges.subscribe(val => {
      this.userForm.get('display_name').setValue(
        this.userForm.get('first_name').value
        + " "
        + this.userForm.get('last_name').value);
    });
    this.userForm.get('last_name').valueChanges.subscribe(val => {
      this.userForm.get('display_name').setValue(
        this.userForm.get('first_name').value
        + " "
        + this.userForm.get('last_name').value);
    });
  }

  rebuildForm() {
    this.userForm.reset({
      user_name: this.user.user_name,
      email_address: this.user.email_address,
      first_name: this.user.first_name,
      last_name: this.user.last_name,
      display_name: this.user.display_name,
      phone_number: this.user.phone_number,
      mobile_number: this.user.mobile_number,
      user_settings: this.user.user_settings,
      gender: this.user.gender,
      dob: this.user.dob,
      avatar_image_url: this.user.avatar_image_url
    });
  }

  passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirm_password').value) {
      return { invalid: true };
    }
  }

  prepareSaveUser(): User {
    const formModel = this.userForm.value;
    let updatedUser: User = new User();

    Object.assign(updatedUser, formModel);

    if (this.userForm.get('passwords.password').value) {
      // changing user password, adding to object
      let new_password = this.userForm.get('passwords.password').value;
      updatedUser.password = new_password;
    }

    return updatedUser;
  }

  ngOnInit(): void {
    let uid = this.route.snapshot.paramMap.get('uid');
    if (uid == 'mine') {
      // get current user data profile
      this.userService.getCurrent().subscribe(
        data => {
          if (data.success) {
            this.user = new User();
            Object.assign(this.user, data.user);
            console.log("current_user: ", JSON.stringify(this.user));
          }
        },
        error => {
          console.error("error: ", error);
        });
    }
  }

  addAlert(content): void {
    // content i.e. {type: 'warning', msg: 'Another alert!'}
    this.alerts.push(content);
  };

  public editProfile() {
    this.createUserForm();
    this.editing = true;
  }

  public cancelEdit() {
    this.editing = false;
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.user = this.prepareSaveUser();
      this.busy = this.userService.update(this.user)
        .subscribe(
          data => {
            // alert success
            console.log("user saved");
          },
          err => {
            console.error("error saving user: ", err);
          }
        );
      this.rebuildForm();
      this.addAlert({type: 'success', msg: '<span class="fw-semi-bold">Éxito:</span> El usuario ha sido actualizado'});
      this.editing = false;
    } else {
      // form no valid to post
      console.error("trying to submit invalid form");
    }
  }
}