const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
import MapLayer from "@/core/components/MapLayer";
import CloseIcon from "@mui/icons-material/Close";
import LayersIcon from "@mui/icons-material/Layers";
import L from "leaflet";
import { useMemo, useState } from "react";
import ShowBound from "./ShowBound";

const ShowProjectArea = ({ primaryArea }) => {
    const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
    const bound = useMemo(() => {
        const coordinates = Object.values(primaryArea.coordinates);

        const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);

        return primaryArea.type === "polygon"
            ? L.polygon(latLngCoords, { color: "#ff5555" })
            : L.polyline(latLngCoords);
    }, [primaryArea]);

    return (
        <Box>
            <Tooltip title="نمایش پلیگان" placement="right" arrow>
                <IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
                    <LayersIcon />
                </IconButton>
            </Tooltip>
            <Dialog
                open={openShowAreaDialog}
                onClose={() => setOpenShowAreaDialog(false)}
                PaperProps={{
                    sx: {
                        transition: "all .3s",
                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
                        borderRadius: 2,
                        padding: 1,
                    },
                }}
                maxWidth="sm"
                fullWidth
                dir="rtl"
            >
                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
                        محدوده طرح
                    </Typography>
                    <IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
                        <CloseIcon />
                    </IconButton>
                </DialogTitle>
                <DialogContent>
                    <Box sx={{ flex: 1 }}>
                        <Box sx={{ width: "100%", height: "400px" }}>
                            <MapLayer style={{ borderRadius: "4px" }}>
                                <ShowBound bound={bound} />
                            </MapLayer>
                        </Box>
                    </Box>
                </DialogContent>
            </Dialog>
        </Box>
    );
};

export default ShowProjectArea;