import { Box, TextField } from "@mui/material";
import { useEffect, useState } from "react";

export const CoordinatesInput = ({
  initialValue,
  setValue,
}: {
  initialValue: { latitude: number; longitude: number };
  setValue: (value: { latitude: number; longitude: number }) => void;
}) => {
  const [inputValue, setInputValue] = useState<string>(
    `${initialValue.latitude} ${initialValue.longitude}`
  );

  useEffect(() => {
    setValue({
      latitude: Number(inputValue.split(" ")[0]),
      longitude: Number(inputValue.split(" ")[1]),
    });
  }, [inputValue]);

  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
      <TextField
        label="Координаты"
        value={inputValue ?? ""}
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
        fullWidth
        variant="outlined"
        helperText="Формат: широта, долгота (например, 59.9398, 30.3146)"
      />
    </Box>
  );
};
