import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Alert} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import {RED} from '../color';

export default function Map({
  lat,
  long,
  showsUserLocation,
  latDelta,
  longDelta,
  children,
}) {
  const [potholeLocation, setPotholeLocation] = useState();

  const sendPostRequest = async () => {
    try {
      const timestamp = Math.floor(Date.now() / 1000); // 타임스탬프를 생성하거나 필요한 값으로 대체
      const response = await fetch(`${url}/action/pothole_display`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          timestamp: timestamp,
        }),
      });
      if (response.ok) {
        const data = await response.json();
        setPotholeLocation(
          data.pothole.map(item => {
            return {
              latitude: item[0],
              longitude: item[1],
            };
          }),
        );
      } else {
        console.error('Server returned an error.', error);
      }
    } catch (error) {
      console.error('An error occurred:', error);
    }
  };
  // 화면이 처음 렌더링될 때 sendPostRequest 호출
  useEffect(() => {
    sendPostRequest();
    Alert.alert('알림', 'bump 발생');
  }, []); // 두 번째 매개변수로 빈 배열을 전달하여 화면이 처음 렌더링될 때 한 번만 실행

  return (
    <View style={styles.mapStyle}>
      <MapView
        style={styles.mapStyle}
        provider={PROVIDER_GOOGLE}
        region={{
          latitude: lat,
          longitude: long,
          latitudeDelta: latDelta,
          longitudeDelta: longDelta,
        }}
        showsUserLocation={showsUserLocation}
        userLocationFastestInterval={1000}
        userLocationUpdateInterval={1000}
        userLocationPriority={'high'}
        showsCompass={true}
        showsMyLocationButton={false}>
        {children}
        {potholeLocation &&
          potholeLocation.length > 0 &&
          potholeLocation.map((location, index) => (
            <Marker
              key={index} // 각 Marker에 고유한 키를 할당
              coordinate={location}
              pinColor={RED}
              title="Bump Location"
            />
          ))}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  mapStyle: {
    flex: 1,
  },
});