import { useCallback, useRef } from 'react';
import {
Box,
Container,
ProgressiveImage,
Screen,
VStack,
Text,
Button,
BottomSheet,
} from '@components-new/index';
import { s } from '@lib/react-native-size-matters';
import ReservedHandleModal from '@screens/handle-intro-screen/components/reserved-handle-modal';
import { NavigationProp } from '@react-navigation/native';
import Routes from '@navigation/routes';
type HandleIntroScreenProps = {
navigation: NavigationProp<unknown>;
};
const HandleIntroScreen = ({ navigation }: HandleIntroScreenProps) => {
const bottomSheetRef = useRef<{ show: () => void; hide: () => void } | null>(null);
const onFindHandlePress = useCallback(() => {
navigation.navigate(Routes.FindHandle);
}, [navigation]);
const onHasReservedPress = useCallback(() => {
bottomSheetRef?.current?.show?.();
}, []);
const onModalClosePress = useCallback(() => {
bottomSheetRef?.current?.hide?.();
}, []);
return (
<>
<Screen
backgroundColor="white"
barStyle="dark-content"
header={{
leftIcon: {
name: 'chevron-back-outline',
type: 'ionicon',
size: s(24),
},
onLeftPress: () => navigation.goBack(),
}}
>
<ProgressiveImage source={require('@assets-new/images/handle_intro.png')} height={230} />
<Container>
<VStack justifyContent="space-between" flex={1} mt="vs-6" mb="vs-4">
<Box>
<Text tx="your_calling_card" variant="semiBoldL" textAlign="center" />
<Text
tx="intro_subtitle"
variant="regularS"
color="darkGrey"
mt="vs-4"
textAlign="center"
/>
</Box>
<Box>
<Button labelTx="create_your_handle" onPress={onFindHandlePress} bg="aubergine" />
<Button
variant="clear"
labelTx="already_reserved_handle"
labelColor="aubergine"
title="I've already reserved one"
onPress={onHasReservedPress}
mt="vs-3"
/>
</Box>
</VStack>
</Container>
</Screen>
<BottomSheet
ref={bottomSheetRef}
snapPoints={[0, 275]}
renderContent={() => (
<ReservedHandleModal onCloseModal={onModalClosePress} onCreatePress={onFindHandlePress} />
)}
/>
</>
);
};
export default HandleIntroScreen;