import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Flex, HStack, Icon, IconButton, Text, VStack, } from "@chakra-ui/react";
import { Edit, Pin } from "@feedloop/icon";
import React from "react";
import { useMap } from "./hooks/useMap";
export const PreviewMapInput = React.memo(function _PreviewMapInput(props) {
    const { ref, marker, mapbox } = useMap({}, {
        defaultMarker: props.location,
    });
    React.useEffect(() => {
        if (marker) {
            marker.setLngLat(props.location).addTo(mapbox);
            mapbox.flyTo({
                center: props.location,
            });
        }
    }, [props.location, marker, mapbox]);
    return (_jsxs(Box, Object.assign({ bg: "surface.900", p: "4px", rounded: "sm" }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", zIndex: 1000 }), _jsx(Box, { ref: ref, w: "full", h: "150px" })] })), _jsxs(Flex, Object.assign({ p: "0.8rem 1rem", justifyContent: "space-between" }, { children: [_jsxs(VStack, Object.assign({ alignItems: "start" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: props.label })), !!props.locationLabel && (_jsxs(HStack, { children: [_jsx(Icon, { as: Pin, fontSize: "md" }), _jsx(Text, Object.assign({ color: "gray.500" }, { children: props.locationLabel }))] }))] })), _jsx(IconButton, { "aria-label": "edit", variant: "outline", icon: _jsx(Edit, {}), onClick: props.onEdit })] }))] })));
});
//# sourceMappingURL=preview.map.js.map