import { icons } from "@/constants";
import { GoogleInputProps } from "@/types/type";
import {  Image, View } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import tw from "twrnc";
import 'react-native-get-random-values';
const googlePlacesApikey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY as string;
const GoogleInputField = ({ icon, initialLocation, containerStyle, textInputBackgroundColor, handlePress }: GoogleInputProps) => {
    return (
        <View style={tw`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyle || "" } mb-5`} >
            <GooglePlacesAutocomplete fetchDetails={true}
                placeholder="Where you want to go?"
                debounce={200}
                styles={{
                    textInputContainer: {
                        alignItems: "center",
                        justifyContent: "center",
                        borderRadius: 20,
                        marginHorizontal: 20,
                        position: "relative",
                        shadowColor: "#d4d4d4",
                    },
                    textInput: {
                        backgroundColor: textInputBackgroundColor || "white",
                        fontSize: 16,
                        fontWeight: 600,
                        marginTop: 5,
                        width: "100%",
                        borderRadius: 200,
                    },
                    listView: {
                        backgroundColor: textInputBackgroundColor || "white",
                        position: "relative",
                        top: 0,
                        width: "100%",
                        borderRadius: 10,
                        shadowColor: "#d4d4d4",
                        zIndex: 99,
                    },
                }} 
                onPress={(data,details = null)=>{
                  handlePress({
                    latitude:details?.geometry.location.lat!,
                    longitude: details?.geometry.location.lng!,
                    address:data.description,
                });
            }}
            query={{
            key:googlePlacesApikey,
            language:"en",
            }}
            renderLeftButton={()=>(
                <View style={tw`justify-center items-center w-6 h-6`}>
                    <Image source={icon ? icon:icons.search} style={tw`w-6 h-6`} resizeMode="contain" />
                    </View>
            )}
            textInputProps={{
                placeholderTextColor:"gray",
                placeholder: initialLocation ?? "where do you want to go?",
            }}
                />
        </View>
    )
}
export default GoogleInputField;