import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Button, Flex, IconButton, Modal, ModalContent, ModalOverlay, useDisclosure, VStack, } from "@chakra-ui/react";
import { ArrowLeft, CurrentLocation } from "@feedloop/icon";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
import "mapbox-gl/dist/mapbox-gl.css";
import React from "react";
import { getShades } from "../../registeredThemes/shadeCalculator";
import { RuntimeContext } from "../../RuntimeContext";
import { useMap } from "./hooks/useMap";
import { useMapboxAPI } from "./hooks/useMapboxAPI";
import { LocationDetail } from "./location-detail.map";
import { LocationNotActivatedModal } from "./location-not-activated-modal.map";
import { Searchbar } from "./searchbar.map";
import { SearchInput } from "./searchInput";
const Map = React.memo(function Map(props) {
    const { styles, defaultMarker, onChange } = props, config = __rest(props, ["styles", "defaultMarker", "onChange"]);
    const { isOpen, onClose, onOpen } = useDisclosure();
    const { isOpen: isLocationErrorModalOpen, onClose: onLocationErrorModalClose, onOpen: onLocationErrorModalOpen, } = useDisclosure();
    const theme = RuntimeContext.useSelectState((s) => s.theme);
    const [marker, setMarker] = React.useState(defaultMarker
        ? {
            lng: defaultMarker[0],
            lat: defaultMarker[1],
        }
        : null);
    const [isCurrentLocation, setIsCurrentLocation] = React.useState(false);
    const handleMarkerSet = React.useCallback((e) => {
        setMarker(e);
        setIsCurrentLocation(false);
    }, []);
    const { ref, marker: mapboxMarker, mapbox, isRealtimePosition, } = useMap(config, {
        defaultMarker,
        onMarkerSet: handleMarkerSet,
    });
    const mapboxAPI = useMapboxAPI();
    const { data, isValidating } = mapboxAPI.useSearch(marker ? `${marker.lng},${marker.lat}` : "", {
        limit: 1,
    });
    const handleChange = React.useCallback(() => {
        onChange(marker.lng, marker.lat);
    }, [marker]);
    const getLocation = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
                mapboxMarker
                    .setLngLat({
                    lng: position.coords.longitude,
                    lat: position.coords.latitude,
                })
                    .addTo(mapbox);
                mapbox.flyTo({
                    center: [position.coords.longitude, position.coords.latitude],
                });
                setMarker({
                    lng: position.coords.longitude,
                    lat: position.coords.latitude,
                });
                setIsCurrentLocation(true);
            }, () => {
                setIsCurrentLocation(false);
                onLocationErrorModalOpen();
            });
        }
    };
    const searchValue = React.useMemo(() => {
        return (data === null || data === void 0 ? void 0 : data.features.length)
            ? (data === null || data === void 0 ? void 0 : data.features)[0].text
            : isValidating
                ? props.placeholder
                : props.defaultValue;
    }, [data === null || data === void 0 ? void 0 : data.features, props.defaultValue, props.placeholder, isValidating]);
    return (_jsxs(Box, { children: [_jsx(Box, Object.assign({ ref: ref, id: "mapboxgl-map", w: "full", h: "480px" }, styles)), _jsx(Box, Object.assign({ position: "absolute", top: 0, left: 0, right: 0, p: "1rem 1.8rem" }, { children: _jsx(Box, Object.assign({ onClick: onOpen }, { children: _jsx(SearchInput, { placeholder: props.placeholder, name: props.name, value: searchValue }, props.name) })) })), _jsx(Box, Object.assign({ p: "1.8rem", position: "absolute", bottom: 0, left: 0, right: 0 }, { children: _jsxs(VStack, Object.assign({ w: "full", gap: 4 }, { children: [_jsxs(Flex, Object.assign({ justifyContent: "space-between", w: "full" }, { children: [_jsx(IconButton, { "aria-label": "back", icon: _jsx(ArrowLeft, {}), bg: "surface.900", color: "black", onClick: props.onBackClick, _hover: {
                                        bg: "var(--chakra-colors-surface-900)",
                                    }, _active: {
                                        bg: "var(--chakra-colors-surface-900)",
                                    } }), _jsx(IconButton, { "aria-label": "current location", icon: _jsx(CurrentLocation, {}), color: isCurrentLocation || isRealtimePosition
                                        ? theme.options.primaryColor
                                        : "black", border: isCurrentLocation || isRealtimePosition
                                        ? `1px solid ${theme.options.primaryColor}`
                                        : "none", bg: isCurrentLocation || isRealtimePosition
                                        ? getShades(theme.options.primaryColor)[50]
                                        : "surface.900", onClick: getLocation, _hover: {
                                        bg: "var(--chakra-colors-surface-900)",
                                    }, _active: {
                                        bg: "var(--chakra-colors-surface-900)",
                                    } })] })), !!data && !!(data === null || data === void 0 ? void 0 : data.features).length && (_jsx(LocationDetail, { title: (data === null || data === void 0 ? void 0 : data.features)[0].text, description: (data === null || data === void 0 ? void 0 : data.features)[0].place_name })), _jsx(Button, Object.assign({ w: "full", disabled: !marker, onClick: handleChange, _disabled: {
                                bg: "var(--chakra-colors-gray-300)",
                            } }, { children: "Save" }))] })) })), _jsxs(Modal, Object.assign({ isOpen: isOpen, onClose: onClose, trapFocus: false, blockScrollOnMount: true }, { children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, Object.assign({ position: "absolute", bottom: 0, margin: 0, h: "full", w: { base: "full", lg: "3xl" }, maxWidth: {
                            base: "full",
                            lg: "3xl",
                        }, bg: "#F6F6F6" }, { children: _jsx(Searchbar, { placeholder: props.placeholder, labelLeftAddon: _jsx(IconButton, { "aria-label": "exit location search", onClick: onClose, icon: _jsx(ArrowLeft, {}), variant: "link", pb: "2" }), onChange: (lng, lat) => {
                                props.onChange(lng, lat);
                                onClose();
                            }, defaultCoordinates: (data === null || data === void 0 ? void 0 : data.query) || props.defaultMarker }) }))] })), _jsx(LocationNotActivatedModal, { isOpen: isLocationErrorModalOpen, onClose: onLocationErrorModalClose })] }));
});
export default Map;
//# sourceMappingURL=mapbox-map.map.js.map