import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useContext, useEffect, useState } from 'react';
import MapViewScreen from "../screen/mapView/MapViewScreen";
import HomeHeader from './HomeHeader';
import HomeSearch from './HomeSearch';
import { UserLocationContext } from '../context/UserLocationContext';
import GlobalApi from '../misc/GlobalApi';
import EVListView from '../screen/googleList/EVListView';
import { MarkerContext } from '../context/MakerContext';


const HomeScreen = () => {
  const {location, setLocation} = useContext(UserLocationContext);
  const [placeList, setPlaceList] = useState([]);

  const [selectedMarker, setSelectedMarker] = useState('');

  useEffect(() => {
    location && GetNearByPlace();
  },[location])

  const GetNearByPlace = () => {
    
    const data = {
      "includedTypes": ["electric_vehicle_charging_station"],
      "maxResultCount": 10,
      "locationRestriction": {
      "circle": {
        "center": {
          "latitude": location?.latitude,
          "longitude": location?.longitude
          },
          "radius": 5000.0
        }
      }
    }
    
    GlobalApi.NewNearByPlace(data).then(res => {
      console.log(JSON.stringify(res.data));
      setPlaceList(res.data?.places);
    })
  } 

  return (
    <MarkerContext.Provider value={{selectedMarker, setSelectedMarker}}>
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <View style={{position: 'absolute', zIndex: 10, width: '100%'}}>
          <HomeHeader />
          <HomeSearch searchedLocation={(location) => setLocation({latitude: location.lat, longitude: location.lng})}/>  
        </View>
        {placeList && <MapViewScreen  placeList={placeList}/>}  
        <View style={{position: 'absolute', bottom: 0, zIndex: 20, width: '100%'}}>
          {placeList && <EVListView placeList={placeList}/>}
        </View>
      </View>
    </MarkerContext.Provider>
  )
}

export default HomeScreen

const styles = StyleSheet.create({})