import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Divider, HStack, Input, VStack } from "@chakra-ui/react";
import React from "react";
import { useMapboxAPI } from "./hooks/useMapboxAPI";
import { LocationDetail } from "./location-detail.map";
import { LocationNotFound } from "./location-not-found.map";
export const Searchbar = React.memo(function Searchbar({ placeholder, labelLeftAddon, onChange, defaultCoordinates, }) {
    var _a, _b;
    const mapboxAPI = useMapboxAPI();
    const [search, setSearch] = React.useState("");
    const { data } = mapboxAPI.useSearch(search, {
        proximity: "106.816666,-6.2",
        limit: 5,
    });
    const { data: retrivedData } = mapboxAPI.useRetrive(defaultCoordinates
        ? `${defaultCoordinates[0]},${defaultCoordinates[1]}`
        : "");
    const handleSearch = React.useCallback((e) => setSearch(e.target.value), []);
    return (_jsxs(VStack, Object.assign({ spacing: 4, p: "1rem", pl: 0, pr: "1.5rem", w: "full" }, { children: [_jsxs(HStack, Object.assign({ w: "full" }, { children: [labelLeftAddon, _jsx(Input, { pr: "10", bgColor: "surface.900", placeholder: placeholder, onChange: handleSearch, _disabled: { border: "1px solid rgb(226, 232, 240)" }, size: "md", flex: 1, border: "1px solid rgb(226, 232, 240)!important", autoFocus: true, defaultValue: ((_a = retrivedData === null || retrivedData === void 0 ? void 0 : retrivedData.features[0]) === null || _a === void 0 ? void 0 : _a.text) || search })] })), _jsxs(VStack, Object.assign({ spacing: 4, p: "1rem", w: "full" }, { children: [!!data && _jsx(Divider, { borderColor: "#E7E7E7" }), (_b = data === null || data === void 0 ? void 0 : data.features) === null || _b === void 0 ? void 0 : _b.map((d) => (_jsx(LocationDetail, { title: d.text, description: d.place_name, onClick: onChange, lngLat: {
                            lng: d.geometry.coordinates[0],
                            lat: d.geometry.coordinates[1],
                        }, _hover: {
                            cursor: "pointer",
                        } }, d.id))), !!data && "features" in data && !(data === null || data === void 0 ? void 0 : data.features.length) && (_jsx(LocationNotFound, {}))] }))] })));
});
//# sourceMappingURL=searchbar.map.js.map