import { View, TouchableOpacity, StyleSheet, Text, Vibration } from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import Animated, {
    FadeIn,
    FadeOut,
    LinearTransition,
} from "react-native-reanimated";
import {
    Home,
    Category,
    HistoryFill,
    HistoryEmpty,
    SettingPrimary,
    Setting,
    HomeLight,
} from "@utils/icons";
import { useValues } from "@src/utils/context";
import { useSelector } from "react-redux";
import { appColors, windowHeight, windowWidth } from "@src/themes";
import { CategoryIcon } from "@src/assets/icons/categoryIcon";

const AnimatedTouchable =
    Animated.createAnimatedComponent(TouchableOpacity);

const CustomNavBar: React.FC<BottomTabBarProps> = ({
    state,
    navigation,
}) => {
    const { isRTL, isDark } = useValues();
    const { translateData } = useSelector((state: any) => state.setting);

    const labels: Record<string, string> = {
        HomeScreen: translateData?.home ?? "Home",
        CategoryScreen: translateData?.services ?? "Category",
        RideScreen: translateData?.history ?? "Ride",
        Profile: translateData?.setting ?? "Profile",
    };

    return (
        <View
            style={[
                styles.container,
                {
                    backgroundColor: isDark
                        ? appColors.primaryText
                        : appColors.whiteColor,
                    borderColor: isDark
                        ? appColors.darkBorder
                        : appColors.border,
                },
            ]}
        >
            {state.routes.map((route, index) => {
                const isFocused = state.index === index;

                return (
                    <AnimatedTouchable
                        key={route.key}
                        onPress={() => {
                            if (state.index !== index) {
                                Vibration.vibrate(90);
                                navigation.navigate(route.name);
                            }
                        }}
                        layout={LinearTransition.springify().mass(0.5)}
                        style={[
                            styles.tabItem,
                            {
                                backgroundColor: isFocused
                                    ? appColors.primary
                                    : "transparent",
                                flexDirection: isRTL ? "row-reverse" : "row",
                            },
                        ]}
                        activeOpacity={1}
                    >
                        {getIcon(route.name, isFocused)}

                        {isFocused && (
                            <Animated.Text
                                entering={FadeIn.duration(200)}
                                exiting={FadeOut.duration(200)}
                                style={[
                                    styles.label,
                                    {
                                        color: isFocused
                                            ? appColors.blackColor
                                            : appColors.primaryText,
                                    },
                                ]}
                            >
                                {labels[route.name]}
                            </Animated.Text>
                        )}
                    </AnimatedTouchable>
                );
            })}
        </View>
    );
};



function getIcon(route: string, focused: boolean) {
    const { isDark } = useValues()

    switch (route) {
        case "HomeScreen":
            return focused ? (
                <Home colors={appColors.blackColor} width={20} height={20} />
            ) : (
                <HomeLight />
            );

        case "CategoryScreen":
            return focused ? (
                <Category colors={appColors.blackColor} />
            ) : (
                <CategoryIcon colors={appColors.go} />
            );

        case "RideScreen":
            return focused ? <HistoryFill /> : <HistoryEmpty />;

        case "Profile":
            return focused ? <SettingPrimary /> : <Setting />;

        default:
            return null;
    }
}

const styles = StyleSheet.create({
    container: {
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        height: windowHeight(60),
        paddingHorizontal: 12,
        paddingBottom: windowHeight(11),
        paddingTop: windowHeight(10),
        borderTopWidth: windowHeight(1),
        borderTopEndRadius: windowWidth(20),
        borderTopStartRadius: windowWidth(20),
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 6 },
        shadowOpacity: 0.25,
        shadowRadius: 6,
        elevation: 8,
    },
    tabItem: {
        height: windowHeight(35),
        paddingHorizontal: 14,
        borderRadius: 30,
        alignItems: "center",
        justifyContent: "center",
    },
    label: {
        marginLeft: 8,
        fontWeight: "600",
        fontSize: 14,
    },
});

export default CustomNavBar;
