import { Users } from './../models/users';
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder} from '@angular/forms';
import { UsersService } from '../entities/users.service';
import { SnackbarService } from '../entities/snackbar.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  formData : FormData;
  base64textString:string;

  constructor(private formBuilder:FormBuilder, private usersService:UsersService, private snackbar:SnackbarService) { }

  ngOnInit() {
  }

  userForm = this.formBuilder.group({
    email : ['', [Validators.required, Validators.email]],
    password : ['', [Validators.required, Validators.pattern('')]],
    fname : ['', [Validators.required, Validators.pattern('')]],
    lname : ['', [Validators.required, Validators.pattern('')]],
    age : ['', [Validators.required, Validators.pattern('')]],
  });

  get email() {
    return this.userForm.get('email');
  }
  get password() {
    return this.userForm.get('password');
  }
  get fname() {
    return this.userForm.get('fname');
  }
  get lname() {
    return this.userForm.get('lname');
  }
  get age() {
    return this.userForm.get('age');
  }
  getEmailErrorMessage() {
    return this.userForm.get('email').hasError('required') ? 'You must enter a value' :
      this.userForm.get('email').hasError('email') ? 'Not a valid email' : '';
  }

  getPasswordErrorMessage() {
    return this.userForm.get('password').hasError('required') ? 'You must enter a value' :
      this.userForm.get('password').hasError('password') ? 'Not a valid password' : '';
  }

  getFnameErrorMessage() {
    return this.userForm.get('fname').hasError('required') ? 'You must enter a value' :
      this.userForm.get('fname').hasError('fname') ? 'Not a valid first name' : '';
  }

  getLnameErrorMessage() {
    return this.userForm.get('lname').hasError('required') ? 'You must enter a value' :
      this.userForm.get('lname').hasError('lname') ? 'Not a valid last name' :'';
  }

  getAgeErrorMessage() {
    return this.userForm.get('age').hasError('required') ? 'You must enter a value' :
      this.userForm.get('age').hasError('age') ? 'Not a valid age' :
            '';
  }

  openUpload() {
    var el = document.getElementById('fileInputID');
    el.click();
  }

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      this.formData = new FormData();
      this.formData.append('uploadFile', file, file.name);

      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      let that = this;
      reader.onload = function () {
        that.base64textString = reader.result.toString();
        var solution= that.base64textString.split("base64,");
        that.base64textString = solution[1].toString();
      };

    }
  }

  createUser() {
    if (this.userForm.invalid) {
      this.snackbar.openSnackBar('Invalid form!');
      return;
    }
    let user = new Users();
    user.email = this.email.value;
    user.password = this.password.value;
    user.fname = this.fname.value;
    user.lname = this.lname.value;
    user.age = this.age.value;
    user.avatar = this.base64textString;

    this.usersService.post(user).then(response => {
      this.snackbar.openSnackBar(response);
    }).catch(error => {
        this.snackbar.openSnackBar("Status code : " + error.status);
    });
  }
}