import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Keyboard} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import Button from './Button';
import Search from './Search';
import {BLACK, PRIMERY, RED, WHITE} from '../color';

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

  const sendPostRequest = async () => {
    try {
      const response = await fetch(`${url}/action/action_display`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      if (response.ok) {
        const data = await response.json();
        console.log('data', data);
        setActionLocation(
          data.report.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);
    }
  };

  return (
    <View style={styles.mapStyle}>
      <View style={styles.searchContainer}>
        <Search placeholder={'도착지를 입력하세요'} />
      </View>
      <MapView
        style={styles.mapStyle}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: lat,
          longitude: long,
          latitudeDelta: latDelta,
          longitudeDelta: longDelta,
        }}
        showsUserLocation={showsUserLocation}>
        {children}
        {actionLocation &&
          actionLocation.length > 0 &&
          actionLocation.map((loc, index) => (
            <Marker
              key={index} // 각 Marker에 고유한 키를 할당
              coordinate={loc}
              pinColor={RED}
              title="action Location"
            />
          ))}
      </MapView>
      <View style={styles.buttonstyle}>
        <View style={styles.markerButtonStyle}>
          <Button
            title={'마커 표시'}
            onPress={sendPostRequest}
            color={WHITE}
            width={'100%'}
            textAlign={'center'}
            padding={10}
            backgroundColor={PRIMERY}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  markerButtonStyle: {
    width: '45%',
    position: 'absolute',
    bottom: 7,
    left: 0,
  },
  mapStyle: {
    flex: 1,
  },
  searchContainer: {
    paddingTop: 10,
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 5,
  },
  buttonstyle: {
    marginHorizontal: 15,
  },
});