import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from "@angular/forms";
import { Http } from '@angular/http'
import { dialcode } from "../../models/mymodel";
import { OrderbyPipe } from '../../providers/sort-pipe';
import { Myservice } from "../../providers/myservice";
import { Storage } from "@ionic/storage";
import { driver } from "../../models/mymodel";
@IonicPage()
@Component({
  selector: 'page-myprofile',
  templateUrl: 'myprofile.html',
})
export class MyprofilePage {
  editForm: FormGroup
  imagechange: boolean = false;
  fileUri: any;
  local:driver;
  formdata = new FormData();

  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private http: Http, private orderbyPipe: OrderbyPipe, private myservice: Myservice,private storage:Storage) {
    this.editForm = this.formBuilder.group({
      name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
      username: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
      email: ['', Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}")])],
      dial_code: ['', Validators.required],
      phone: ['', Validators.compose([Validators.required, this.myservice.checkLimit(10000000, 999999999999999)])],
      image:['']
    })
  }

  ionViewDidEnter() {
    this.storage.get('driver_data').then(data=>{
      if(data){
        console.log(data)
        this.editForm.controls['name'].setValue(data.name)
        this.editForm.controls['username'].setValue(data.user_name)
        this.editForm.controls['email'].setValue(data.email)
        this.editForm.controls['dial_code'].setValue(data.dial_code)
        this.editForm.controls['phone'].setValue(data.phone)
        this.editForm.controls['image'].setValue(data.image)
      }
    })
    // this.myservice.load_post({},'')
  }

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {

      var reader = new FileReader();

      reader.onload = (event: any) => {
        this.editForm.controls['image'].setValue(event.target.result)
      }

      reader.readAsDataURL(event.target.files[0]);

      let file = fileList[0];
      var ext = (file.name).split(".").pop();
      if (ext == 'jpg' || ext == 'jpeg' || ext == 'png') {
        this.formdata.append('image', file, file.name);
        this.imagechange = true;
      }
      else {
        this.myservice.show_alert('','Please choose image with .jpg/.jpeg/.png extension')
      }
    }
  }

  updateProfile(){
    this.formdata.append('data', JSON.stringify(this.editForm.value));
    this.formdata.append('id', JSON.stringify(this.local.id));
    this.myservice.fileUpload(this.formdata, 'updatedriverProfile').subscribe(response => {
      if (response.status == true) {
        // this.local.email = response.data.email
        // if (this.imagechange == true)
        //   this.local.patient_display_image = response.data.patient_display_image
        // this.local.name = response.data.firstname + '' + response.data.lastname

        // this.events.publish('patient:profile', this.local);
        // this.translate.get('editprofile.Profile updated successfully').subscribe(value => {
        //   var alertTitle = value;
        //   this.toast.show(alertTitle, '2000', 'center').subscribe(toast => {
        //     console.log(toast);
        //   });
        // })

      }
      else {
          this.myservice.show_alert('', response.message)
      }
    })
  }

  back(){
    this.navCtrl.pop();
  }

  changepass(){
    this.navCtrl.push("ChangepassPage");
  }

}
