import React, { useEffect, useRef, useState } from 'react';

declare global {
  interface Window {
    ymaps: any;
  }
}

interface Marker {
  id: string;
  coordinates: number[];
  title: string;
}

const MapComponent: React.FC = () => {
  const mapRef = useRef<HTMLDivElement>(null);
  const [map, setMap] = useState<any>(null);
  const [markers, setMarkers] = useState<Marker[]>(() => {
    const savedMarkers = localStorage.getItem('markers');
    return savedMarkers ? JSON.parse(savedMarkers) : [];
  });

  useEffect(() => {
    if (window.ymaps) {
      window.ymaps.ready().then(() => {
        const newMap = new window.ymaps.Map(mapRef.current, {
          center: [55.751574, 37.573856],
          zoom: 9,
        });

        newMap.events.add('click', (e: any) => {
          const coords = e.get('coords');
          const title = prompt('Введите название метки:', 'Новая метка');

          if (title) {
            const marker = {
              id: Date.now().toString(),
              coordinates: coords,
              title,
            };
            setMarkers((prevMarkers) => [...prevMarkers, marker]);
          }
        });

        setMap(newMap);
      });
    }
  }, []);

  useEffect(() => {
    if (map) {
      map.geoObjects.removeAll();
      markers.forEach((marker) => {
        const placemark = new window.ymaps.Placemark(
          marker.coordinates,
          {
            balloonContent: marker.title,
          },
          {
            draggable: true,
          }
        );

        placemark.events.add('contextmenu', () => {
          if (window.confirm('Удалить эту метку?')) {
            setMarkers((prevMarkers) =>
              prevMarkers.filter((m) => m.id !== marker.id)
            );
          }
        });

        placemark.events.add('dragend', (e: any) => {
          const newCoords = e.get('target').geometry.getCoordinates();
          setMarkers((prevMarkers) =>
            prevMarkers.map((m) =>
              m.id === marker.id ? { ...m, coordinates: newCoords } : m
            )
          );
        });

        map.geoObjects.add(placemark);
      });
    }
  }, [markers, map]);

  useEffect(() => {
    localStorage.setItem('markers', JSON.stringify(markers));
  }, [markers]);

  return (
    <div style={{ display: 'flex' }}>
      <div
        ref={mapRef}
        style={{ width: '70%', height: '500px', marginRight: '20px' }}
      ></div>
      <div style={{ width: '30%' }}>
        <h2>Список меток</h2>
        <ul>
          {markers.map((marker) => (
            <li key={marker.id}>
              <input
                type="text"
                value={marker.title}
                onChange={(e) => {
                  const newTitle = e.target.value;
                  setMarkers((prevMarkers) =>
                    prevMarkers.map((m) =>
                      m.id === marker.id ? { ...m, title: newTitle } : m
                    )
                  );
                }}
              />
              <button
                onClick={() => {
                  map.setCenter(marker.coordinates, 14);
                }}
              >
                Перейти
              </button>
              <button
                onClick={() => {
                  if (window.confirm('Удалить эту метку?')) {
                    setMarkers((prevMarkers) =>
                      prevMarkers.filter((m) => m.id !== marker.id)
                    );
                  }
                }}
              >
                Удалить
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default MapComponent; добавь чтобы при нажатии на карту добавлялась временная метка которая исчезнет при клике на другое место и чтобы текущую метку можно было сохранить ввести ей название