import { CustomButton } from "@/components/custom-button";
import { GoogleTextInput } from "@/components/google-text-input";
import { RideLayout } from "@/components/ride-layout";
import { icons } from "@/constants";
import { useT } from "@/lib/i18n";
import { useLocationStore } from "@/store";
import { router } from "expo-router";
import { Text, View } from "react-native";

const FindRide = () => {
  const t = useT();
  const {
    userAddress,
    destinationAddress,
    userLatitude,
    userLongitude,
    destinationLatitude,
    destinationLongitude,
    setDestinationLocation,
    setUserLocation,
  } = useLocationStore();

  const canFind =
    !!userLatitude &&
    !!userLongitude &&
    !!destinationLatitude &&
    !!destinationLongitude;

  return (
    <RideLayout title={t("findRide.title")} snapPoints={["85%"]}>
      <View className="my-3">
        <Text className="text-lg font-JakartaSemiBold mb-3 text-black dark:text-white">
          {t("findRide.from")}
        </Text>

        <GoogleTextInput
          icon={icons.target}
          initialLocation={userAddress ?? ""}
          containerStyles="bg-neutral-100 dark:bg-neutral-800"
          handlePress={setUserLocation}
        />
      </View>

      <View className="my-3">
        <Text className="text-lg font-JakartaSemiBold mb-3 text-black dark:text-white">
          {t("findRide.to")}
        </Text>

        <GoogleTextInput
          icon={icons.map}
          initialLocation={destinationAddress ?? ""}
          containerStyles="bg-neutral-100 dark:bg-neutral-800"
          handlePress={setDestinationLocation}
        />
      </View>

      <CustomButton
        title={t("findRide.findNow")}
        onPress={() => router.push("/(root)/confirm-ride")}
        disabled={!canFind}
        className={`mt-5 ${!canFind ? "opacity-50" : ""}`}
      />
    </RideLayout>
  );
};

export default FindRide;