"use client";

import ExploreIcon from "@mui/icons-material/Explore";
import { Box, Button, Dialog, DialogActions, DialogContent, IconButton } from "@mui/material";
import { useState } from "react";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import ShowLocationMarker from "@/core/components/ShowLocationMarker";

const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading />,
    ssr: false,
});

const ShowLocation = ({ lat, lng }) => {
    const [openShowLocationModal, setOpenShowLocationModal] = useState(false);

    const handleOpenShowLocationModal = () => {
        setOpenShowLocationModal(true);
    };

    const handleCloseShowLocationModal = () => {
        setOpenShowLocationModal(false);
    };

    return (
        <Box sx={{ display: "flex", justifyContent: "center" }}>
            <IconButton onClick={handleOpenShowLocationModal} size="small" color="primary">
                <ExploreIcon />
            </IconButton>
            <Dialog
                open={openShowLocationModal}
                onClose={handleCloseShowLocationModal}
                aria-labelledby="responsive-dialog-title"
            >
                <DialogContent>
                    <Box sx={{ width: "400px", height: "400px" }}>
                        <MapLayer>
                            <ShowLocationMarker start_lat={lat} start_lng={lng} />
                        </MapLayer>
                    </Box>
                </DialogContent>
                <DialogActions>
                    <Button color="error" variant="outlined" onClick={handleCloseShowLocationModal}>
                        بستن
                    </Button>
                </DialogActions>
            </Dialog>
        </Box>
    );
};
export default ShowLocation;