import { router } from "expo-router";
import { FlatList, Text, View } from "react-native";

import { CustomButton } from "@/components/custom-button";
import { DriverCard } from "@/components/driver-card";
import { RideLayout } from "@/components/ride-layout";
import { useDriverStore } from "@/store";

const ConfirmRide = () => {
  const { drivers, selectedDriver, setSelectedDriver } = useDriverStore();

  return (
    <RideLayout title="Choose a Driver" snapPoints={["65%", "85%"]}>
      <FlatList
        data={drivers}
        renderItem={({ item }) => (
          <DriverCard
            item={item}
            selected={selectedDriver ?? 0}
            setSelected={() => setSelectedDriver(item.id)}
          />
        )}
        ListEmptyComponent={
          <Text className="text-center text-general-200 font-JakartaMedium mt-10">
            No drivers available on this route right now.{"\n"}Please try
            another destination.
          </Text>
        }
        ListFooterComponent={
          <View className="mx-5 mt-10">
            <CustomButton
              title="Select Ride"
              onPress={() => router.push("/(root)/book-ride")}
              disabled={selectedDriver === null}
              className={selectedDriver === null ? "opacity-50" : ""}
            />
          </View>
        }
      />
    </RideLayout>
  );
};

export default ConfirmRide;