import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
import { router } from "expo-router";
import { useRef, type PropsWithChildren } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import { icons } from "@/constants";
import { tr } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";

import { Map } from "./map";

type RideLayoutProps = {
  title?: string;
  snapPoints?: string[];
};

export const RideLayout = ({
  title,
  snapPoints,
  children,
}: PropsWithChildren<RideLayoutProps>) => {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const { isDark } = useTheme();

  return (
    <GestureHandlerRootView>
      <View className="flex-1 bg-white dark:bg-neutral-950">
        <View className="flex flex-col h-screen bg-blue-500 dark:bg-neutral-900">
          <View className="flex flex-row absolute z-10 top-16 items-center justify-start px-5">
            <TouchableOpacity onPress={() => router.back()}>
              <View className="w-10 h-10 bg-white dark:bg-neutral-900 rounded-full items-center justify-center">
                <Image
                  source={icons.backArrow}
                  alt={tr("components.rideLayout.backArrowAlt")}
                  resizeMode="contain"
                  className="w-6 h-6"
                />
              </View>
            </TouchableOpacity>

            <Text className="text-xl font-JakartaSemiBold ml-5 text-black dark:text-white">
              {title ?? tr("components.rideLayout.goBack")}
            </Text>
          </View>

          <Map />
        </View>

        <BottomSheet
          keyboardBehavior="extend"
          ref={bottomSheetRef}
          snapPoints={snapPoints ?? ["40%", "85%"]}
          index={0}
          backgroundStyle={{ backgroundColor: isDark ? "#0a0a0a" : "#ffffff" }}
          handleIndicatorStyle={{
            backgroundColor: isDark ? "#525252" : "#d4d4d4",
          }}
        >
          <BottomSheetView
            style={{
              flex: 1,
              padding: 20,
            }}
          >
            {children}
          </BottomSheetView>
        </BottomSheet>
      </View>
    </GestureHandlerRootView>
  );
};