import { NgFor, NgIf } from '@angular/common';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { api } from '@enums/api.enum';
import { constants } from '@enums/constants.enum';
import { GJainStorage } from '@enums/gjain-storage.enum';
import { Roots } from '@enums/root.enum';
import { CommonResponse, Privacy, ProfileData } from '@interfaces/common';
import { LocationForm } from '@interfaces/form';
import { IonicModule, NavController } from '@ionic/angular';
import { AlertService } from '@services/alert.service';
import { HttpRequestService } from '@services/http-request.service';
import { StateManagementService } from '@services/state-management.service';
import { UtilityService } from '@services/utility.service';
@Component({
  selector: 'app-shravak-edit-location',
  templateUrl: './shravak-edit-location.page.html',
  styleUrls: ['./shravak-edit-location.page.scss'],
  standalone: true,
  imports: [IonicModule, NgIf, FormsModule, ReactiveFormsModule, NgFor]
})
export class ShravakEditLocationPage implements OnInit {
  @ViewChild('currentLocation') currentLocation: ElementRef;
  @ViewChild('nativeLocation') nativeLocation: ElementRef;
  privacyList: Privacy[] = constants.privacy;
  locationForm: FormGroup<LocationForm>;
  userProfileData: ProfileData;
  longitude = '';
  latitude = '';
  native_longitude = '';
  native_latitude = '';
  serializedForm: string;
  constructor(
    private httpRequestService: HttpRequestService,
    private alert: AlertService,
    private navCtrl: NavController,
    private stateManagementService: StateManagementService,
    private utilityService: UtilityService
  ) { }

  async ngOnInit() {
    this.userProfileData = await this.stateManagementService.storage.get(GJainStorage.profileData);
    this.longitude = this.userProfileData.longitude;
    this.latitude = this.userProfileData.latitude;
    this.native_longitude = this.userProfileData.native_longitude;
    this.native_latitude = this.userProfileData.native_latitude;
    this.locationForm = new FormGroup<LocationForm>({
      location: new FormControl(this.userProfileData.location, Validators.required),
      location_privacy: new FormControl(this.userProfileData.location_privacy, Validators.required),
      native_place: new FormControl(this.userProfileData.native_place, Validators.required),
      native_place_privacy: new FormControl(this.userProfileData.native_place_privacy, Validators.required),
    });
    this.serializedForm = this.getSerializedForm(this.locationForm);
  }

  onSubmit(form) {
    if (!this.locationForm.valid) {
      this.locationForm.markAllAsTouched();
      return;
    }
    if (this.serializedForm === this.getSerializedForm(form)) {
      this.alert.showToaster('No changes to save');
      return;
    }
    const params = form.value;
    params.native_longitude = this.native_longitude;
    params.native_latitude = this.native_latitude;
    params.longitude = this.longitude;
    params.latitude = this.latitude;
    this.httpRequestService.post(api.updateShravakProfile, params).then((res: CommonResponse) => {
      this.navCtrl.navigateBack(Roots.page + '/' + Roots.shravakAbout);
      this.alert.showToaster(res.message);
    });
  }

  getSerializedForm(form) {
    const formObj = form.getRawValue();
    return JSON.stringify(formObj);
  }

  initAutocompleteCurrent(): void {
    this.utilityService.createAutocomplete(this.currentLocation.nativeElement, []).subscribe((details) => {
      this.locationForm.controls.location.setValue(this.currentLocation.nativeElement.value);
      this.longitude = details.geometry.location.lng();
      this.latitude = details.geometry.location.lat();
    });
  }

  removeLatAndLongCurrent() {
    this.longitude = '';
    this.latitude = '';
  }

  initAutocompleteNative(): void {
    this.utilityService.createAutocomplete(this.nativeLocation.nativeElement, []).subscribe((details) => {
      this.locationForm.controls.native_place.setValue(this.nativeLocation.nativeElement.value);
      this.native_longitude = details.geometry.location.lng();
      this.native_latitude = details.geometry.location.lat();
    });
  }

  removeLatAndLongNative() {
    this.native_longitude = '';
    this.native_latitude = '';
  }

}
