export class AdminComponent implements OnInit, AfterViewInit, OnDestroy  {

  @ViewChild('input') inputRef: ElementRef
  @ViewChild('modal_edit') modal_editRef: ElementRef

  users: User[]
  userId: string = null
  modal_edit: MaterialInstance
  form: FormGroup
  image: File
  imagePreview = ''
  isNew = true
  user: User

  constructor(
    private userService: UserService
  ) { }

  ngOnInit() {
    this.form = new FormGroup({
      username: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
      name: new FormControl(null, Validators.required),
      roles: new FormControl(null, Validators.required)
    })

  }

  private loadUser() {
    this.userService.fetch().subscribe(
      users => {
        this.users = users
      }
    );
  }

  ngAfterViewInit() {
    this.modal_edit = MaterialService.initModal(this.modal_editRef)
  }

  ngOnDestroy() {
    this.modal_edit.destroy()
  }

  onSelectUser(user: User){
    this.userId = user.id
    this.form.patchValue({
      name: user.name,
      username: user.username,
      roles: user.roles
    })
    this.imagePreview = user.photoSrc
    this.modal_edit.open()
    MaterialService.updateTextInputs()
  }

  onCancel() {
    this.modal_edit.close()
    this.form.reset(
      {
        name: '',
        username: '',
        roles: '',
        imagePreview: '',
        password: ''
      }
    )
  }

  triggerClick() {
    this.inputRef.nativeElement.click()
  }

  onFileUpload(event: any) {
    const file = event.target.files[0]
    this.image = file

    const reader = new FileReader()

    reader.onload = () => {
      this.imagePreview = reader.result
    }

    reader.readAsDataURL(file)
  }

  onUpdate() {
    if(this.userId) {
      this.user.id = this.userId
      this.userService.update(this.user.id, this.form.value.name, this.form.value.username,  this.form.value.password, this.form.value.roles, this.image).subscribe(
        () => {
          MaterialService.toast('Changes saved')
          this.loadUser()
        },
        error => {
          this.form.enable()
          MaterialService.toast(error.error.message)
        },
        () => {
          this.modal_edit.close()
        })
    }
  }


}

update(id: string, name: string, username: string, password: string,  roles?: string, image?: File): Observable<User> {
    const fd = new FormData()

    if (image) {
        fd.append('image', image, image.name)
    }
    fd.append('name', name)
    fd.append('username', username)
    fd.append('password', password)
    fd.append('roles', roles)

    return this.http.patch<User>(`/api/admin/${id}`, fd)
}