import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useContext, useEffect, useState } from 'react';
import Text from '../Text';
import Link from '../Link';
import NoValue from '../NoValue/NoValue';
import LocationView from './LocationView';
import MapsContext from './MapsContext';
import { getCoords, loadMapsAPI } from './utils';
const LocationDisplay = forwardRef(function LocationDisplay({ value, displayText, variant = 'text-map', height = '25rem', zoomLevel = 13, ...restProps }, ref) {
    const { name, ...providerOpts } = useContext(MapsContext);
    const [location, setLocation] = useState();
    const [loading, setLoading] = useState(false);
    const valueString = typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`;
    useEffect(() => {
        if (['text-map', 'map'].includes(variant) && value) {
            (async () => {
                setLoading(true);
                await loadMapsAPI(name, providerOpts);
                setLocation(await getCoords(value));
                setLoading(false);
            })();
        }
    }, [variant, value]);
    return !value ? (_jsx(Text, { ref: ref, ...restProps, "aria-hidden": 'true', children: _jsx(NoValue, {}) })) : (_jsxs(_Fragment, { children: [(variant === 'text' || variant === 'text-map') &&
                (name === 'google' ? (_jsx(Link, { ref: ref, ...restProps, target: '_blank', rel: 'noopener noreferrer', href: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`)}`, children: displayText || valueString })) : (_jsx(Text, { ref: ref, ...restProps, children: displayText || valueString }))), (variant === 'text-map' || variant === 'map') && (_jsx(LocationView, { pins: location ? [location] : [], centerMapOnChange: true, height: height, zoomLevel: zoomLevel, loading: loading }))] }));
});
export default LocationDisplay;
//# sourceMappingURL=LocationDisplay.js.map