import { ImageInfo } from "expo-image-picker";
import { makeAutoObservable } from "mobx";
import { LatLng } from "react-native-maps";
import { Landmark, LMPhoto } from "../../../../state/external/landmarks";

class AddLandmarkFlowStore {
    pendingLandmark: Landmark = {};
    photos: LMPhoto[] = [];
    panelVisible: boolean = false;

    constructor() {
        makeAutoObservable(this)
    }



    stageNewLandmarkWithLocation(latlng: LatLng, floor?: number) {
        this.pendingLandmark = { latitude: latlng.latitude, longitude: latlng.longitude, floor: floor }
        this.panelVisible = true
    }

    updatePendingLandmark(newData: Landmark) {
        this.pendingLandmark = {...this.pendingLandmark, ...newData}
        console.log(this.pendingLandmark)
    }

    addPhoto(result: ImageInfo) {
        const photo: LMPhoto = { id: '', image_b64: 'data:image/png;base64,' + result.base64, height: result.height, width: result.width, landmark: '' }
        this.photos.push(photo)
    }

    deletePhoto = (index: number) => {
        this.photos = addLandmarkStore.photos.filter((photo, i) => i != index)
    }

    close() {
        this.pendingLandmark = {}
        this.photos = []
        this.panelVisible = false
    }

    get landmarkReady() {
        return !!(this.pendingLandmark.title, this.pendingLandmark.description)
    }
}

export const addLandmarkStore = new AddLandmarkFlowStore()