import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import MapIcon from "@mui/icons-material/Map";
import MapLayer from "@/core/components/MapLayer";
import ShowRoute from "../../Actions/Create/Form/Area/Routing/ShowRoute";

const RouteDetail = ({ encoded_route }) => {
    const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
    return (
        <>
            <Tooltip title="مسیر انتخابی">
                <IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
                    <MapIcon />
                </IconButton>
            </Tooltip>
            <Dialog
                fullWidth
                open={openRouteDetailDialog}
                onClose={() => setOpenRouteDetailDialog(false)}
                PaperProps={{
                    sx: {
                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
                    },
                }}
                dir="rtl"
                maxWidth={"sm"}
            >
                <DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
                <Box sx={{ mx: 1, borderRadius: "5px" }}>
                    <Box
                        sx={{
                            width: "100%",
                            height: "300px",
                            border: "1px solid #e1e1e1",
                            borderRadius: "5px",
                        }}
                    >
                        <MapLayer style={{ borderRadius: "4px" }}>
                            <ShowRoute area={encoded_route} />
                        </MapLayer>
                    </Box>
                </Box>
                <DialogActions>
                    <Button
                        onClick={() => setOpenRouteDetailDialog(false)}
                        variant="outlined"
                        color="secondary"
                        autoFocus
                    >
                        بستن
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
};
export default RouteDetail;