import { PhotoService } from './../../services/photo.service';
import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { ToastController, LoadingController, ActionSheetController } from "@ionic/angular";
import { UserService } from "../../services/user.service";
import { CityService } from "../../services/city.service";
import { UtilsService } from "../../services/utils.service";
import { StorageService } from '../../services/storage.service';

@Component({
  selector: "page-user-profile",
  templateUrl: "user-profile.html",
  styleUrls: ["./user-profile.scss"],
})
export class UserProfilePage implements OnInit {
  accountUser: any;
  documentType: any;
  messageText: any;
  lastImage: string = null;
  token: any;
  constructor(
    public userProvider: UserService,
    private storage: StorageService,
    public translateService: TranslateService,
    public toastCtrl: ToastController,
    public loadingCtrl: LoadingController,
    public actionSheetCtrl: ActionSheetController,
    public cityProvider: CityService,
    private utilsService: UtilsService,
    private photoService: PhotoService
  ) {
    // traduccion para toast actualizacion del perfil
    this.translateService
      .get([
        "PROFILE_UPDATED",
        "TITLE_ACTION_SHEET",
        "TEXT1_ACTION_SHEET",
        "TEXT2_ACTION_SHEET",
        "TEXT_CANCEL_SELECT",
        "TEXT1_UPDATE_IMAGE_PROFILE",
        "TEXT2_UPDATE_IMAGE_PROFILE",
        "TEXT3_UPDATE_IMAGE_PROFILE",
        "TEXT4_UPDATE_IMAGE_PROFILE",
      ])
      .subscribe((values) => {
        this.messageText = {
          updateSuccess: values.PROFILE_UPDATED,
          titleAction: values.TITLE_ACTION_SHEET,
          photo: values.TEXT1_ACTION_SHEET,
          gallery: values.TEXT2_ACTION_SHEET,
          cancel: values.TEXT_CANCEL_SELECT,
          text1UpdateImage: values.TEXT1_UPDATE_IMAGE_PROFILE,
          text2UpdateImage: values.TEXT2_UPDATE_IMAGE_PROFILE,
          text3UpdateImage: values.TEXT3_UPDATE_IMAGE_PROFILE,
          text4UpdateImage: values.TEXT4_UPDATE_IMAGE_PROFILE,
        };
      });
  }

  ionViewWillLeave() {
    this.userProvider.getInfoUser();
  }

  ngOnInit() {
    this.accountUser = this.userProvider._infoUser;
    this.storage.get("token").then((token) => {
      this.token = token;
    });
  }

  async actionSheetImage(fileInput) {
    this.photoService.actionSheetImage(fileInput).then((photo) => {
      this.uploadImage(photo);
    });
  }

  private presentToast(text) {
    this.utilsService.presentToast(3000, "", "top", text);
  }

  uploadImage(b64: any) {
    const formData = new FormData();
    formData.append("file", b64);
    this.accountUser.user_info.photo = null;
    this.accountUser.user_info.photo_social = null;

    this.utilsService.presentLoading(this.translateService.instant("all.loading"));
    this.userProvider.uploadProfilePhoto(formData, this.token.access_token).then((res: any) => {
      this.utilsService.dismissLoading();
      if (res.status) {
        this.storage.get("infoUser").then((infoUser) => {
          let dataUser = infoUser;
          dataUser.user_info.photo = res.filename;
          dataUser.user_info.photo_social = null;
          this.storage.set("infoUser", dataUser);
          this.accountUser = dataUser;
          setTimeout(() => {
            this.userProvider.getInfoUser();
          }, 500);
        });
        this.presentToast(this.messageText.text3UpdateImage);
      } else {
        this.presentToast(this.messageText.text4UpdateImage);
      }
      this.utilsService.closeAllAlerts();
    }).catch((error) => {
      this.utilsService.dismissLoading();
      console.log("error uploadProfilePhoto: ", error);
      this.presentToast(this.messageText.text4UpdateImage);
    });
  }
}