136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
import { Button } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
|
|
import { GoogleMap } from "./GoogleMap";
|
|
import styles from "./MapBottomSheet.module.css";
|
|
import { MapFallback } from "./MapFallback";
|
|
|
|
interface MapBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
initialValue: string;
|
|
onSave: (value: string) => void;
|
|
}
|
|
|
|
interface LocationData {
|
|
lat: number;
|
|
lng: number;
|
|
address: string;
|
|
}
|
|
|
|
export function MapBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
initialValue,
|
|
onSave,
|
|
}: MapBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const [value, setValue] = useState(initialValue);
|
|
const [selectedLocation, setSelectedLocation] = useState<LocationData | null>(
|
|
null
|
|
);
|
|
const [useMapFallback, setUseMapFallback] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue);
|
|
|
|
// Try to parse initialValue as JSON to set selectedLocation
|
|
if (initialValue) {
|
|
try {
|
|
const parsed = JSON.parse(initialValue);
|
|
if (parsed.lat && parsed.lng && parsed.address) {
|
|
setSelectedLocation(parsed);
|
|
}
|
|
} catch {
|
|
// If parsing fails, it's just a string value, not a location object
|
|
setSelectedLocation(null);
|
|
}
|
|
}
|
|
}, [initialValue]);
|
|
|
|
const handleLocationSelect = (lat: number, lng: number, address: string) => {
|
|
console.log('Location selected:', { lat, lng, address });
|
|
setSelectedLocation({ lat, lng, address });
|
|
setValue(address);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
console.log('Save clicked, selectedLocation:', selectedLocation);
|
|
if (selectedLocation) {
|
|
onSave(JSON.stringify(selectedLocation));
|
|
} else {
|
|
onSave(value);
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setValue(initialValue);
|
|
setSelectedLocation(null);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={handleCancel}
|
|
title={t("cart.selectLocation")}
|
|
showCloseButton={true}
|
|
initialSnap={1}
|
|
height={"100vh"}
|
|
snapPoints={["100vh"]}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
padding: 0, // Override ProBottomSheet padding
|
|
margin: 0, // Remove any margins
|
|
}}
|
|
>
|
|
<div className={styles.mapContainer}>
|
|
<div className={styles.mapWrapper}>
|
|
{useMapFallback ? (
|
|
<MapFallback
|
|
onLocationSelect={handleLocationSelect}
|
|
height="100%"
|
|
initialAddress={selectedLocation?.address || ""}
|
|
/>
|
|
) : (
|
|
<GoogleMap onLocationSelect={handleLocationSelect} height="100%" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{!useMapFallback && (
|
|
<div className={styles.fallbackButton}>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
onClick={() => setUseMapFallback(true)}
|
|
>
|
|
{t("cart.mapFallbackText")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<div className={styles.actionButtons}>
|
|
<Button className={styles.actionButton} onClick={handleCancel}>
|
|
{t("cart.cancel")}
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
className={styles.actionButton}
|
|
onClick={handleSave}
|
|
disabled={!selectedLocation}
|
|
>
|
|
{t("cart.save")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|