Notes

import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
View,
Animated,
PanResponder,
GestureResponderEvent,
PanResponderGestureState,
Modal,
Pressable,
Image,
Dimensions,
LayoutChangeEvent,
TouchableOpacity,
} from 'react-native';
import { MbText } from '@mb-core/text';
import { useMbCordovaBridgeLegacy } from '@mb-lib/cordova-bridge-legacy';
import { useMbModalController } from '@mb-lib/modal-controller';
import {
animateMove,
getNextState,
getNextMovement,
getPanYValue,
initPanYValue,
getDrawerStates,
getInitialDrawer,
getInitialDrawerByHeight,
} from '../utils/pan-responder';
import { styles } from '../styles/bottom-drawer-styles';
import { MbBottomDrawerProps } from '../types/bottom-drawer-props';
import { Breakpoint, defaultBreakpoints, DrawerState } from '../enums/drawer-state';
import { drawerbackground } from '../styles/bottom-drawer';
import { backIcon } from '../assets/icons/back-icon';
import { closeIcon } from '../assets/icons/close-icon';
import { MbScrollableChild } from './scrollable-child';

export const onStartShouldSetResponder = () => true;
export const onStartShouldStopResponder = () => false;

const windowDimensions = Dimensions.get('window');

const movableArea = styles.gestureArea.marginTop;

export const MbBottomDrawer: FC<MbBottomDrawerProps> = props => {
const {
children,
visible = true,
header = null,
subHeader = null,
isScrollable = false,
scrollViewConfig = {},
showBackButton = false,
showCloseButton = false,
breakpoints = defaultBreakpoints,
autoHeight = false,
initialBreakpoint = Breakpoint.Peek,
testOnlyResetPan,
visibleCallback = () => {},
style = undefined,
contentStyle = undefined,
headerStyle = undefined,
subHeaderStyle = undefined,
resizableBackdrop,
closeOnBackdropClick = true,
customIcon,
drawerBackdropStyle = undefined,
isGeolocationFlow = false,
goBackToSignUpFlow = () => {},
closeOnDrawDown = false,
} = props;
const panValue: Animated.ValueXY = useRef(new Animated.ValueXY()).current;
const [showAnimatedView, setShowAnimatedView] = useState(false);
const [isScrollEnabled, setIsScrollEnabled] = useState(false);
const [modalVisible, setModalVisible] = useState(visible);
const [initialHeight, setInitialHeight] = useState(0);
const [resizableBackdropHeight, changeResizableBackdropHeight] = useState(
windowDimensions.height,
);
const [shown, setShown] = useState(false);
const { addKeyboardShowListener } = useMbCordovaBridgeLegacy();
const { add, remove } = useMbModalController();
const drawerStates = useMemo(() => {
return getDrawerStates(breakpoints);
}, [breakpoints]);

const [dimensions, setDimensions] = useState(windowDimensions);

const heightStyle = useMemo(() => {
console.log(
dimensions.height,
resizableBackdropHeight,
'asdasdasdas',
getInitialDrawer(drawerStates, initialBreakpoint),
);
return {
height: dimensions.height - resizableBackdropHeight,
minHeight: getInitialDrawer(drawerStates, initialBreakpoint),
bottom: 0,
position: 'absolute',
maxHeight: dimensions.height - 30,
};
}, [dimensions, dimensions.height, resizableBackdropHeight]);

const onKeyboardShow = useCallback(async () => {
await animateMove(panValue.y, getNextMovement(drawerStates.Open));
if (!!resizableBackdrop) {
changeResizableBackdropHeight(getNextMovement(drawerStates.Open));
}
}, [panValue, animateMove, drawerStates]);

useEffect(() => {
if (!!resizableBackdrop) {
changeResizableBackdropHeight(windowDimensions.height);
}
setModalVisible(visible);
}, [visible]);

useEffect(() => {
initPanYValue(panValue);
}, [panValue]);

useEffect(() => {
if (testOnlyResetPan) {
testOnlyResetPan(panValue.y);
}
}, [testOnlyResetPan]);

const closePopupIntl = useCallback(async () => {
await animateMove(panValue.y, getNextMovement(DrawerState.Closed));
if (!!resizableBackdrop) {
changeResizableBackdropHeight(getNextMovement(DrawerState.Closed));
}
setModalVisible(false);
setShowAnimatedView(false);
visibleCallback(false);
}, []);

const closePopup = useCallback(() => {
if (isGeolocationFlow) {
goBackToSignUpFlow(true);
} else {
remove(closePopupIntl);
}
}, []);

useEffect(() => {
addKeyboardShowListener(onKeyboardShow);
add(closePopupIntl);
}, []);

// @todo Pan responder not working with useCallback
const onPanResponderMove = useCallback(
async (_: GestureResponderEvent, { moveY, dy, y0 }: PanResponderGestureState) => {
const distFromPan = y0 - getPanYValue(panValue.y);
if (distFromPan < movableArea && distFromPan > -dimensions.height / 2) {
await animateMove(panValue.y, moveY);
if (!!resizableBackdrop) {
changeResizableBackdropHeight(moveY);
}
} else if (dy < -6 || dy > 6) {
await animateMove(panValue.y, getPanYValue(panValue.y) + dy / 5);
if (!!resizableBackdrop) {
changeResizableBackdropHeight(getPanYValue(panValue.y) + dy / 5);
}
}
},
[panValue],
);

// @todo Pan responder not working with useCallback
const onPanResponderRelease = useCallback(
async (_: GestureResponderEvent, { moveY, y0 }: PanResponderGestureState) => {
let nextState = getNextState(getPanYValue(panValue.y), moveY, y0, drawerStates);
if (!closeOnDrawDown && nextState === drawerStates.Closed) {
nextState = drawerStates.Peek;
}
if (nextState === drawerStates.Closed) {
closePopup();
}
if (isScrollable) {
if (nextState === drawerStates.Open) {
setIsScrollEnabled(() => true);
} else {
setIsScrollEnabled(() => false);
}
}
await animateMove(panValue.y, getNextMovement(nextState));
if (!!resizableBackdrop) {
changeResizableBackdropHeight(getNextMovement(nextState));
}
},
[panValue, drawerStates],
);

const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: onStartShouldSetResponder,
onMoveShouldSetPanResponder: onStartShouldSetResponder,
onPanResponderTerminationRequest: onStartShouldStopResponder,
onPanResponderGrant: () => {
panValue.flattenOffset();
},
onPanResponderMove,
onPanResponderRelease,
}),
).current;

const initialDisplayState = useMemo(() => {
let initialViewValue = getInitialDrawer(drawerStates, initialBreakpoint);
if (autoHeight) {
initialViewValue = getInitialDrawerByHeight(initialHeight);
}
return initialViewValue;
}, [initialBreakpoint, drawerStates, autoHeight, dimensions.height, initialHeight]);

useEffect(() => {
if (shown) {
onShow();
}
}, [drawerStates]);

const onShow = useCallback(async () => {
if (!shown) {
panValue.y.setValue(getNextMovement(drawerStates.Closed));
}
setShowAnimatedView(true);
setShown(true);
if (!autoHeight) {
await animateMove(panValue.y, initialDisplayState);
if (!!resizableBackdrop) {
changeResizableBackdropHeight(initialDisplayState);
}
}
}, [visible, modalVisible, drawerStates]);

useEffect(() => {
if (autoHeight && initialDisplayState !== dimensions.height) {
animateMove(panValue.y, initialDisplayState).then(() => {
if (!!resizableBackdrop) {
changeResizableBackdropHeight(initialDisplayState);
}
});
}
}, [autoHeight, initialDisplayState]);

// try to open backdrop height so commented that
// const drawerTransform = useMemo(() => {
// return [{ translateY: panValue.y }];
// }, [panValue.y]);

const styleMap = useMemo(() => {
return { height: resizableBackdropHeight + 30, minHeight: initialDisplayState + 30 };
}, [resizableBackdropHeight]);

const onContentLayout = useCallback(
({
nativeEvent: {
layout: { height },
},
}: LayoutChangeEvent) => {
if (!autoHeight) return;
setInitialHeight(height);
},
[autoHeight],
);

const contentWrapper = useMemo(() => {
return autoHeight ? null : styles.contentWrapper;
}, [autoHeight]);

const onBackdropClick = useCallback(() => {
if (closeOnBackdropClick) {
closePopup();
}
}, [closeOnBackdropClick, closePopup]);

return (
<Modal
testID="slide_modal"
animationType="fade"
transparent
visible={modalVisible}
onShow={onShow}
onRequestClose={closePopup}
>
<Pressable
style={styles.pressableBackdrop}
onPressOut={onBackdropClick}
testID="backdrop"
>
<Image
source={{ uri: drawerbackground }}
blurRadius={3}
alt="backdropImage"
style={[styles.backdrop, drawerBackdropStyle]}
/>
{resizableBackdrop && (
<View
style={[styles.mapWrapperStyle, { width: '100%' }, styleMap]}
testID="map-show-wrapper"
>
{resizableBackdrop}
</View>
)}
{showAnimatedView && (
<Animated.View
testID="slide_test"
style={[
styles.container,
heightStyle,
// { transform: drawerTransform },
style,
]}
{...panResponder.panHandlers}
>
<View style={contentWrapper} onLayout={onContentLayout}>
<View
style={styles.gestureArea}
accessible
accessibilityRole="tab"
testID="dragArea"
>
<View
accessible
accessibilityRole="button"
testID="dragHandle"
style={styles.pullItem}
/>
</View>
<View style={styles.headerWrapper}>
{showBackButton && (
<TouchableOpacity onPress={closePopup} testID="backButton">
<Image
style={styles.backButtonIcon}
source={{ uri: backIcon }}
alt="backIcon"
/>
</TouchableOpacity>
)}
<View style={styles.titleWrapper}>
{header && (
<View testID="headerSlot">
<MbText style={[styles.headerSlot, headerStyle]}>
{header}
</MbText>
</View>
)}
{subHeader && (
<View testID="subheaderSlot">
<MbText style={[styles.subheaderSlot, subHeaderStyle]}>
{subHeader}
</MbText>
</View>
)}
</View>
{showCloseButton && (
<TouchableOpacity onPress={closePopup} testID="closeButton">
<Image
style={styles.closeButtonIcon}
source={{ uri: customIcon || closeIcon }}
alt="closeButton"
/>
</TouchableOpacity>
)}
</View>
{isScrollable && (
<MbScrollableChild
scrollViewConfig={scrollViewConfig}
panValue={panValue.y}
drawerStates={drawerStates}
scrollEnabled={isScrollEnabled}
>
{children}
</MbScrollableChild>
)}
{!isScrollable && (
<View style={[styles.contentContainer, contentStyle]}>
{children}
</View>
)}
</View>
</Animated.View>
)}
</Pressable>
</Modal>
);
};

MbBottomDrawer.displayName = 'BottomDrawer';