import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';

import { UserService } from '../../services/user.service';

@Component({
  selector: 'page-settings',
  templateUrl: './settings.page.html',
  styleUrls: [ './settings.page.scss' ]
})
export class PageSettings implements OnInit {

  auth: any;
  user: any;
  working: boolean = false;
  success: boolean = false;
  form: FormGroup;
  @ViewChild('formDirective') private formDirective: NgForm;

  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      username: [ { disabled: true }, Validators.nullValidator ],
      email: [ '', Validators.nullValidator ],
      about: [ '', Validators.nullValidator ],
      gravity: [ '', Validators.nullValidator ],
    });

    this.form.get('username').disable();

    this.userService.get().subscribe(user => {
      this.user = user;
      if (!this.user.settings) {
        this.user.settings = {};
      }
      this.form.get('username').setValue(this.user.username);
      this.form.get('email').setValue(this.user.email);
      this.form.get('about').setValue(this.user.about);
      this.form.get('gravity').setValue(this.user.settings.gravity || this.user.metadata.defaultGravity);
    })
  }

  hasError(controlName: string): boolean {
    return this.form.controls[ controlName ].errors != null;
  }

  resetGravity(): void {
    this.user.settings.gravity = null;
    this.form.get('gravity').setValue(this.user.metadata.defaultGravity);
  }

  save(): void {
    if (this.working) {
      return;
    }

    this.working = true;
    this.success = false;

    this.user.about = this.form.get('about').value;
    this.user.email = this.form.get('email').value;

    if (!this.user.settings) {
      this.user.settings = {};
    }

    if (this.form.get('gravity').value != this.user.metadata.defaultGravity && !this.user.settings.gravity) {
      this.user.settings.gravity = this.form.get('gravity').value;
    } else if (this.user.settings.gravity) {
      this.user.settings.gravity = this.form.get('gravity').value;
    }

    this.userService.update(this.user).subscribe((data) => {
      this.user = data;
      if (!this.user.settings) {
        this.user.settings = {};
      }
      this.working = false;
      this.success = true;
    }, (error) => {
      this.working = false;
      if (error.status == 422) {
        let errors = {};
        for (let code of error.error) {
          errors[ code.field ] = errors[ code.field ] || {};
          errors[ code.field ][ code.code ] = true;
        }

        for (let code in errors) {
          this.form.get(code).setErrors(errors[ code ]);
        }
      }
    })

  }

}