import { Component, ChangeDetectorRef, ElementRef, ViewChild, OnInit } from '@angular/core';
import { User } from '../models/user.model';

import { TokenStorageService } from '../_service/token-storage.service';
import { UserService } from '../_service/user.service';
import { FormGroup } from '@angular/forms';
import { FormGroupExtension, RxFormBuilder } from '@rxweb/reactive-form-validators';
import { DialogService } from 'src/app/admin/_service/dialog.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  submitted = false;
  
  users: User[] = [];
  user! : User;
  isLoggedIn = false;
  isLoginFailed = false;
  errorMessage = '';
  userImage! : File;
  error = {};
  roles: string[] = [];
  username?: string;
  userFormGrp!: FormGroup;
  preview!: string;
  isAddMode: boolean = true;
  @ViewChild('profilePhoto') el!: ElementRef;
  imageUrl: any = 'http://localhost:8080/portfolio/files/image/ironman-default.jpg';
  editFile: boolean = true;
  removeUpload: boolean = false;
  isUserSaved:boolean = false;
  @ViewChild('closeBtn') closeBtn:any;
  public filter!: string;
  //sorting
  key!:any; //set default
  reverse: boolean = false;
  sort(key:any){
    this.key = key;
    this.reverse = !this.reverse;
  }
  page : number = 1;
  constructor(private tokenStorage: TokenStorageService, private userService: UserService,
    private formBuilder: RxFormBuilder, private changeDetectorRef: ChangeDetectorRef, private dialogService: DialogService) {
    if (this.tokenStorage.getToken()) {
      this.roles = this.tokenStorage.getUser().roles;
      this.username = this.tokenStorage.getUser().username;
      this.tokenStorage.loggedInFlag(true);
    }
  }


  ngOnInit(): void { 
   
   let user = new User();
   this.isAddMode = true;
   this.imageUrl = 'http://localhost:8080/portfolio/files/image/ironman-default.jpg';   
   this.userFormGrp = this.formBuilder.formGroup(user);
    //console.log(this.userFormGrp.value);
    //console.log(this.userFormGrp.controls.user);
    this.fetchUserList(); 
    this.userFormGrp.reset();   
  }

  uploadFile(event: any) {
    let reader = new FileReader(); // HTML5 FileReader API
    this.userImage = event.target.files[0];
    this.userFormGrp.value.profilePhoto = this.userImage;
    //this.userFormGrp.get('userImage').setValue(userImage);
    console.log(this.userImage);
    if (event.target.files && event.target.files[0]) {
      reader.readAsDataURL(this.userImage);

      // When file uploads set it to file formcontrol
      reader.onload = () => {
        this.imageUrl = reader.result;
        this.userFormGrp.patchValue({
          userImage : reader.result
        });
        this.editFile = false;
        this.removeUpload = true;
      }
      // ChangeDetectorRef since file is loading outside the zone
      this.changeDetectorRef.markForCheck();
    }
  }

  // Function to remove uploaded file
  removeUploadedFile() {
    let newFileList = Array.from(this.el.nativeElement.files);
    this.imageUrl = 'http://localhost:8080/portfolio/files/image/ironman-default.jpg';
    this.editFile = true;
    this.removeUpload = false;
    this.userFormGrp.patchValue({
      userImage: [null]
    });
  }


  fetchUserList() {
    this.userService.getUserList().subscribe((data: any) =>
      this.users = data,
      error => this.error = error
    );

  }

  onSubmit(): void {
    console.log('LoginComponent - onSubmit');
    let userObject = this.userFormGrp.value;
    let formDataX = (<FormGroupExtension>this.userFormGrp).toFormData();
    console.log(formDataX);
    let formData = new FormData();//(<FormGroupExtension>this.userFormGrp).toFormData();   
    if (this.userFormGrp.valid) {
      //this.userService.saveUser(this.formData,this.userFormGrp.value.avatar).subscribe(
        if(this.userImage==null){
          console.log('Uploaded image is null.');
          this.userImage = this.imageUrl;
        }
       formData.append('userImage',this.userImage);
       formData.append('userDetails', new Blob([JSON.stringify(userObject)],
        {
            type: "application/json"
        })); 
      console.log(formData);
      this.userService.saveUser(formData).subscribe((data: any) => {
        console.log('data-->' + data)
        console.log("notification method calling");
        this.dialogService.notification("Success", "Saved Successfully.",true)
          .then((ok: any) => {
            console.log('Press Ok', ok);
            this.page = 1;
            this.closeModal();
            this.fetchUserList();
          })
          .catch(() => {
            console.log('User dismissed the dialog');
            this.closeModal();
          }); 
      }, err => {
        this.error = err;
        console.log(this.error);
        this.dialogService.notification("Error",err.errorDesc,false)
          .then((ok: any) => {
            console.log('ok', ok);
            this.closeModal();
            //this.userService.filter('Fetch User List');
          })
          .catch(() => {
            console.log('User dismissed the dialog');
          })
      });
    }
  }

  getUser(id:any)
  {
    this.user = new User();
    this.isAddMode = false;
    console.log("Edit User whose id is "+id);
    this.userService.getUser(id).subscribe((data: any) =>{
      this.user = data;
      //console.log(JSON.stringify(this.user));
      this.imageUrl = this.user.bigAvatarLink;
      this.userFormGrp = this.formBuilder.formGroup(User,this.user);
      this.changeDetectorRef.markForCheck();
    } , err => {
      this.dialogService.notification("Error",err.errorDesc,false)
          .then((ok: any) => {
            console.log('ok', ok);
            this.closeModal();
            //this.userService.filter('Fetch User List');
          })
          .catch(() => {
            console.log('User dismissed the dialog');
          })
    })   
  }

  reset(): void {
    console.log("reset method called");
    let user = new User();
    this.isAddMode = true;
    this.userFormGrp = this.formBuilder.formGroup(user);
    this.removeUploadedFile();
    this.imageUrl = 'http://localhost:8080/portfolio/files/image/ironman-default.jpg';
    this.userFormGrp.reset();
  }

  

  public closeModal(): void {
    this.reset();
    this.closeBtn.nativeElement.click();
  }


}