"use client";

import {
    Box,
    Button,
    Chip,
    Dialog,
    DialogActions,
    DialogContent,
    Divider,
    FormControl,
    FormControlLabel,
    FormLabel,
    Radio,
    RadioGroup,
    Typography,
} from "@mui/material";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import "leaflet-draw/dist/leaflet.draw.css";
import GppMaybeIcon from "@mui/icons-material/GppMaybe";
import PolygonForDesign from "./PolygonForDesign";

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

const MapModifyDialog = ({ mapModifyModal, setMapModifyModal }) => {
    const handleClose = () => {
        setMapModifyModal(false);
    };

    return (
        <Dialog open={mapModifyModal} onClose={handleClose} maxWidth="lg" fullWidth>
            <DialogContent sx={{ p: 2 }} dividers>
                <Divider sx={{ my: 3 }}>
                    <Chip
                        color="primary"
                        sx={{ mx: 1, fontSize: "13px", fontWeight: 500 }}
                        label="بررسی پلیگان طرح متقاضی"
                    />
                </Divider>
                <Box
                    sx={{
                        width: "100%",
                        height: "400px",
                        borderRadius: 3,
                        borderBottomLeftRadius: 0,
                        overflow: "hidden",
                    }}
                >
                    <MapLayer>
                        <PolygonForDesign />
                    </MapLayer>
                </Box>
                <Box sx={{ display: "flex", my: 2, alignItems: "center" }}>
                    <GppMaybeIcon color="warning" />
                    <Typography variant="button" sx={{ color: "warning.main", ml: 1 }}>
                        نکته: اصلاح ننمودن طرح به منزله تایید طرح میباشد.
                    </Typography>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        border: "1px solid #e1e1e1",
                        p: 2,
                        borderRadius: 1,
                    }}
                >
                    <FormControl sx={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
                        <FormLabel id="way-status" sx={{ fontWeight: 500, fontSize: "16px", color: "warning.main" }}>
                            آیا طرح نیاز به ایجاد راه دسترسی دارد؟
                        </FormLabel>
                        <RadioGroup row aria-labelledby="way-status" defaultValue={0} name="radio-buttons-group">
                            <FormControlLabel value={1} control={<Radio color="warning" />} label="بله" />
                            <FormControlLabel value={0} control={<Radio color="warning" />} label="خیر" />
                        </RadioGroup>
                    </FormControl>
                </Box>
            </DialogContent>
            <DialogActions sx={{ justifyContent: "center", py: 2 }}>
                <Button size="large" variant="outlined">
                    بستن
                </Button>
                <Button size="large" variant="contained">
                    ثبت
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default MapModifyDialog;