import { Component, Input, ViewContainerRef } from '@angular/core';
import { ModalDialogService, ModalDialogOptions } from '@nativescript/angular';
import { deg2dec, dec2deg, CoordinateType } from '~/shared/pipes/gps-coordinate.pipe';
import { MapPickerModal } from '../map-picker-modal/map-picker-modal.component';

interface GpsForm {
    gpsLatitude: string;
    gpsLongitude: string;
}

@Component({
    selector: 'GpsForm',
    moduleId: module.id,
    templateUrl: './gps-form.component.html',
})
export class GpsFormComponent {
    data: GpsForm = {
        gpsLatitude: '',
        gpsLongitude: '',
    };
    @Input() class: string = '';

    constructor(private _vcRef: ViewContainerRef,
        private _modalService: ModalDialogService,) {

    }

    public get formData(): GpsForm {
        return { ...this.data }
    }
    public set formData(data: GpsForm) {
        this.data = data;
    }

    openMap() {
        const { gpsLongitude, gpsLatitude } = this.data;
        const options: ModalDialogOptions = {
            viewContainerRef: this._vcRef,
            context: {
                long: gpsLongitude && deg2dec(gpsLongitude),
                lat: gpsLatitude && deg2dec(gpsLatitude)
            },
            fullscreen: true,
        };
        this._modalService.showModal(MapPickerModal, options)
            .then((formResult: { lat: number, long: number }) => {
                if (formResult) {
                    this.data = {
                        gpsLatitude: dec2deg(formResult.lat, CoordinateType.LATITUDE),
                        gpsLongitude: dec2deg(formResult.long, CoordinateType.LONGITUDE),
                    }
                }
            });
    }

}
