import { GeoOperations } from "../../Logic/GeoOperations"
import { ImmutableStore } from "../../Logic/UIEventSource"
import { SpecialVisualisationParams, SpecialVisualizationSvelte } from "../SpecialVisualization"
import SvelteUIElement from "../Base/SvelteUIElement"
import MapillaryLink from "../BigComponents/MapillaryLink.svelte"

export class MapillaryLinkVis extends SpecialVisualizationSvelte {
    funcName = "mapillary_link"
    group = "web_and_communication"

    docs = "Adds a button to open mapillary on the specified location"
    needsUrls = []

    args = [
        {
            name: "zoom",
            doc: "The startzoom of mapillary",
            defaultValue: "18",
        },
    ]

    public constr({ args, feature }: SpecialVisualisationParams): SvelteUIElement {
        const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
        let zoom = Number(args[0])
        if (isNaN(zoom)) {
            zoom = 18
        }
        return new SvelteUIElement(MapillaryLink, {
            mapProperties: {
                lat,
                lon,
            },
            zoom: new ImmutableStore(zoom),
        })
    }
}