"use client";

import { Marker, useMap } from "react-leaflet";
import { useEffect } from "react";
import L from "leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import { Box, FormControl, InputAdornment, InputLabel, OutlinedInput, Stack, useMediaQuery } from "@mui/material";
import VerifiedIcon from "@mui/icons-material/Verified";
import { useTheme } from "@emotion/react";

const ShowLocationMarker = ({ start_lat, start_lng, end_lat, end_lng }) => {
    const map = useMap();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

    const defaultIconSize = [35, 35];

    const createCustomIcon = (size, iconUrl) => {
        return L.icon({
            iconUrl: iconUrl,
            iconSize: size,
            iconAnchor: [size[0] / 2, size[1]],
            popupAnchor: [0, -size[1]],
        });
    };

    useEffect(() => {
        if (start_lat && end_lng) {
            map.fitBounds(
                [
                    { lat: start_lat, lng: start_lng },
                    { lat: end_lat, lng: end_lng },
                ],
                { paddingTopLeft: [16, 16], paddingBottomRight: [16, 130] }
            );
        } else if (start_lat) {
            map.setView({ lat: start_lat, lng: start_lng }, 15);
        }
    }, [start_lat, start_lng, map, end_lng, end_lat]);

    return (
        <>
            {start_lat && start_lng && (
                <Marker
                    position={{ lat: start_lat, lng: start_lng }}
                    icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
                />
            )}
            {end_lat && end_lng && (
                <Marker
                    position={{ lat: end_lat, lng: end_lng }}
                    icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
                />
            )}
            <Box
                sx={{
                    zIndex: "400",
                    position: "absolute",
                    background: "#ffffff94",
                    p: 2,
                    borderRadius: "10px",
                    boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
                    bottom: "5px",
                    left: "5px",
                    right: "5px",
                }}
            >
                <Stack direction={end_lat && end_lng ? "row" : "column"} spacing={end_lat && end_lng ? 0.5 : 0}>
                    {start_lat && start_lng && (
                        <Stack spacing={1}>
                            <FormControl size="small" variant="outlined">
                                <InputLabel sx={{ color: "success.main" }} htmlFor="start_lat">
                                    {end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
                                </InputLabel>
                                <OutlinedInput
                                    id="start_lat"
                                    type="text"
                                    size="small"
                                    readOnly
                                    fullWidth
                                    sx={{
                                        "& .MuiOutlinedInput-notchedOutline": {
                                            borderColor: "success.main",
                                        },
                                        color: "success.main",
                                    }}
                                    value={start_lat}
                                    endAdornment={
                                        <InputAdornment position="end">
                                            <VerifiedIcon color="success" />
                                        </InputAdornment>
                                    }
                                    label={end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
                                />
                            </FormControl>
                            <FormControl size="small" variant="outlined">
                                <InputLabel sx={{ color: "success.main" }} htmlFor="start_lng">
                                    {end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
                                </InputLabel>
                                <OutlinedInput
                                    id="start_lng"
                                    type="text"
                                    size="small"
                                    readOnly
                                    fullWidth
                                    sx={{
                                        "& .MuiOutlinedInput-notchedOutline": {
                                            borderColor: "success.main",
                                        },
                                        color: "success.main",
                                    }}
                                    value={start_lng}
                                    endAdornment={
                                        <InputAdornment position="end">
                                            <VerifiedIcon color="success" />
                                        </InputAdornment>
                                    }
                                    label={end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
                                />
                            </FormControl>
                        </Stack>
                    )}
                    {end_lat && end_lng && (
                        <Stack spacing={1}>
                            <FormControl size="small" variant="outlined">
                                <InputLabel sx={{ color: "success.main" }} htmlFor="end_lat">
                                    طول جغرافیایی پایان
                                </InputLabel>
                                <OutlinedInput
                                    id="end_lat"
                                    type="text"
                                    size="small"
                                    readOnly
                                    sx={{
                                        "& .MuiOutlinedInput-notchedOutline": {
                                            borderColor: "success.main",
                                        },
                                        color: "success.main",
                                    }}
                                    value={end_lat}
                                    endAdornment={
                                        <InputAdornment position="end">
                                            <VerifiedIcon color="success" />
                                        </InputAdornment>
                                    }
                                    label="طول جغرافیایی پایان"
                                />
                            </FormControl>
                            <FormControl size="small" variant="outlined">
                                <InputLabel sx={{ color: "success.main" }} htmlFor="end_lng">
                                    عرض جغرافیایی پایان
                                </InputLabel>
                                <OutlinedInput
                                    id="end_lng"
                                    type="text"
                                    size="small"
                                    readOnly
                                    sx={{
                                        "& .MuiOutlinedInput-notchedOutline": {
                                            borderColor: "success.main",
                                        },
                                        color: "success.main",
                                    }}
                                    value={end_lng}
                                    endAdornment={
                                        <InputAdornment position="end">
                                            <VerifiedIcon color="success" />
                                        </InputAdornment>
                                    }
                                    label="عرض جغرافیایی پایان"
                                />
                            </FormControl>
                        </Stack>
                    )}
                </Stack>
            </Box>
        </>
    );
};

export default ShowLocationMarker;