import { View, Image, TouchableOpacity } from "react-native";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";

import { icons } from "@/constants";
import { GoogleInputProps } from "@/types/type";

export const GoogleTextInput = ({
  icon,
  initialLocation,
  containerStyles,
  textInputBackgroundColor,
  handlePress,
}: GoogleInputProps) => {
  const googlePlacesApiKey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY!;

  return (
    <View
      className={`flex flex-row items-center justify-center relative z-50 rounded-xl ${containerStyles}`}
    >
      <GooglePlacesAutocomplete
        fetchDetails={true}
        placeholder="Search"
        debounce={200}
        styles={{
          textInputContainer: {
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 20,
            marginHorizontal: 20,
            position: "relative",
            shadowColor: "#d4d4d4",
          },
          textInput: {
            backgroundColor: textInputBackgroundColor
              ? textInputBackgroundColor
              : "white",
            fontSize: 16,
            fontWeight: "600",
            marginTop: 5,
            width: "100%",
            borderRadius: 200,
          },
          listView: {
            backgroundColor: textInputBackgroundColor
              ? 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={() => (
          // TODO: replace later with View and remove onPress
          <TouchableOpacity
            onPress={() => {
              handlePress({
                latitude: 26.8467,
                longitude: 80.9462,
                address: "Lucknow, Uttar Pradesh",
              });
            }}
            className="justify-center items-center w-6 h-6"
          >
            <Image
              source={icon ? icon : icons.search}
              alt="Search"
              className="w-6 h-6"
              resizeMode="contain"
            />
          </TouchableOpacity>
        )}
        textInputProps={{
          placeholderTextColor: "gray",
          placeholder: initialLocation ?? "Where do you want to go?",
        }}
      />
    </View>
  );
};