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

const ShowPrimaryArea = ({primaryArea}) => {
    const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
    const bound = useMemo(() => {
        const latLngCoords = primaryArea.coordinates.map(coord => [coord[1], coord[0]]);
        return primaryArea.type === "polygon"
            ? L.polygon(latLngCoords)
            : 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 ShowPrimaryArea