import { NgIf } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { api } from '@enums/api.enum';
import { Roots } from '@enums/root.enum';
import { ActionSheetController, IonicModule, NavController } from '@ionic/angular';
import { SafeUrlPipe } from '@pipes/safe-url.pipe';
import { AlertService } from '@services/alert.service';
import { CameraGalleryService } from '@services/camera-gallery.service';
import { HttpRequestService } from '@services/http-request.service';
import { StateManagementService } from '@services/state-management.service';

@Component({
  selector: 'app-passive-user-profile-image',
  templateUrl: './passive-user-profile-image.page.html',
  styleUrls: ['./passive-user-profile-image.page.scss'],
  standalone: true,
  imports: [IonicModule, NgIf, SafeUrlPipe]
})
export class PassiveUserProfileImagePage implements OnInit {
  photo: any;
  isImageChanged = false;
  constructor(
    private navCtrl: NavController,
    private alert: AlertService,
    private stateManagementService: StateManagementService,
    private httpRequestService: HttpRequestService,
    public actionSheetCtrl: ActionSheetController,
    private cameraGalleryService: CameraGalleryService
  ) { }

  ngOnInit() {
    if (this.stateManagementService.userInformation.avatar) {
      this.photo = this.stateManagementService.userInformation.avatar;
    }
  }

  selectProfileImage() {
    this.cameraGalleryService.selectImage(512, 512, true).then((imageData: { imgString: string; itemImage: Blob }) => {
      if (imageData) {
        this.isImageChanged = true;
        this.photo = imageData.imgString;
        this.stateManagementService.userInformation.avatar = imageData.itemImage;
      }
    });
  }

  async moveToNext() {
    if (!this.photo) {
      this.alert.showToaster('Please select any profile image');
      return;
    }
    const formData = new FormData();
    formData.append('name', this.stateManagementService.userInformation.name);
    formData.append('relationship', this.stateManagementService.userInformation.relationship);
    formData.append('birth_date', this.stateManagementService.userInformation.birth_date);
    formData.append('school_name', this.stateManagementService.userInformation.school_name ?
      this.stateManagementService.userInformation.school_name : '');
    if (this.isImageChanged) {
      formData.append('avatar', this.stateManagementService.userInformation.avatar);
    }
    formData.append('about', this.stateManagementService.userInformation.aboutUser ?
      this.stateManagementService.userInformation.aboutUser : '');
    this.addPassiveUser(formData);
  }

  addPassiveUser(formData) {
    this.alert.showSpinner();
    let apiPath = api.addPassiveUser;
    if (this.stateManagementService.userInformation.id) {
      apiPath = api.addPassiveUser + '/' + this.stateManagementService.userInformation.id;
    }
    this.httpRequestService.post(apiPath, formData).then((res: any) => {
      this.alert.showToaster(res.message);
      this.navCtrl.navigateBack(Roots.page + '/' + Roots.shravakAbout);
    }).catch((err) => {
      this.alert.showToasterError(err.error);
    }).finally(() => {
      this.alert.hideLoader();
    });
  }

  moveToBack() {
    this.navCtrl.navigateForward(Roots.page + '/' + Roots.passiveUserEducation);
  }
}
