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

const MapApp = () => {
  const [userLocation, setUserLocation] = useState(null);
  const [otherUserLocation, setOtherUserLocation] = useState(null);

  useEffect(() => {
    // Kullanıcının konumunu al
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        setUserLocation({ latitude, longitude });
      },
      (error) => {
        console.error('Konum alınamadı:', error.message);
      }
    );

    // Simüle edilmiş diğer kullanıcının konumu
    // Gerçek projede bu veri bir sunucudan alınmalıdır
    setOtherUserLocation({ latitude: 40.7128, longitude: -74.006 });

    // Web soketleri veya başka bir gerçek zamanlı iletişim yöntemiyle
    // konum güncellemelerini alın ve setOtherUserLocation ile güncelleyin
  }, []);

  const calculateDistance = () => {
    if (userLocation && otherUserLocation) {
      const R = 6371; // Yeryüzü ortalama yarıçapı (km)
      const dLat = toRadians(otherUserLocation.latitude - userLocation.latitude);
      const dLon = toRadians(otherUserLocation.longitude - userLocation.longitude);

      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(toRadians(userLocation.latitude)) * Math.cos(toRadians(otherUserLocation.latitude)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);

      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      const distance = R * c;

      console.log('Uzaklık:', distance.toFixed(2), 'km');
    }
  };

  const toRadians = (angle) => {
    return angle * (Math.PI / 180);
  };

  return (
    <div>
      <h1>Harita Uygulaması</h1>
      {userLocation && (
        <p>Kullanıcı Konumu: {userLocation.latitude}, {userLocation.longitude}</p>
      )}
      {otherUserLocation && (
        <p>Diğer Kullanıcı Konumu: {otherUserLocation.latitude}, {otherUserLocation.longitude}</p>
      )}
      <button onClick={calculateDistance}>Uzaklığı Hesapla</button>
    </div>
  );
};

export default MapApp;