import React from 'react';
import { View } from 'react-native';
import {
    NavigationContainer,
    type ParamListBase
} from '@react-navigation/native';
import {
    CardStyleInterpolators,
    createStackNavigator
} from '@react-navigation/stack';
import { useTheme } from '../../branding';
import type {
    BottomSheetNavigatorProps,
    BottomSheetScreenConfig
} from './types';
import themedStyles from './styles';

const Stack = createStackNavigator<ParamListBase>();

export const BottomSheetNavigator = ({
    navigationRef,
    screens,
    onRouteChange
}: BottomSheetNavigatorProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View style={styles.navigator}>
            <NavigationContainer
                independent
                ref={navigationRef}
                onStateChange={state => {
                    const routeName = state?.routes?.[state.index]?.name;
                    onRouteChange?.(routeName as string);
                }}
            >
                <Stack.Navigator
                    initialRouteName={screens?.[0]?.name}
                    screenOptions={{
                        headerShown: false,
                        gestureEnabled: false,
                        cardStyle: { flex: 1 },
                        cardStyleInterpolator:
                            CardStyleInterpolators.forHorizontalIOS
                    }}
                >
                    {screens.map(
                        ({
                            name,
                            component,
                            options
                        }: BottomSheetScreenConfig) => (
                            <Stack.Screen
                                key={name}
                                name={name}
                                component={component}
                                options={options}
                            />
                        )
                    )}
                </Stack.Navigator>
            </NavigationContainer>
        </View>
    );
};

export default BottomSheetNavigator;