"use strict";

import React, { useCallback, useContext, useEffect, useRef } from 'react';
import { Dimensions, KeyboardAvoidingView, PanResponder, Platform, Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
import Animated, { Easing, Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ApplicationContext } from "../Context/index.js";
import { Colors, Radius, Spacing, Styles } from "../Consts/index.js";
import { Text } from "../Text/index.js";
import { Icon } from "../Icon/index.js";
import { SizedBox } from "../SizedBox/index.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const BottomSheet = ({
  navigation,
  route
}) => {
  const {
    theme,
    navigator
  } = useContext(ApplicationContext);
  const heightDevice = Dimensions.get('screen').height;
  const action = useRef(undefined);
  const insets = useSafeAreaInsets();
  const {
    screen: Screen,
    title,
    header,
    barrierDismissible = false,
    draggable = true,
    useKeyboardAvoidingView = true,
    keyboardVerticalOffset
  } = route.params;
  const translateY = useSharedValue(heightDevice);
  const panResponder = useRef(PanResponder.create({
    onStartShouldSetPanResponder: () => draggable,
    onMoveShouldSetPanResponder: (_, gestureState) => {
      return draggable && gestureState.dy > 0;
    },
    onPanResponderMove: (_, gestureState) => {
      if (gestureState.dy > 0) {
        translateY.value = gestureState.dy;
      }
    },
    onPanResponderRelease: (_, gestureState) => {
      if (gestureState.dy > 100) {
        action.current = 'gesture';
        onDismiss();
      } else {
        translateY.value = withSpring(0, {
          damping: 20,
          mass: 1,
          stiffness: 100,
          overshootClamping: false
        });
      }
    }
  })).current;
  const params = {
    ...route.params,
    navigation
  };
  let backgroundColor = theme.colors.background.surface;
  delete params.screen;

  /**
   * emit dismiss event
   */
  useEffect(() => {
    translateY.value = heightDevice;
    translateY.value = withTiming(0, {
      duration: 350,
      easing: Easing.bezier(0.05, 0.7, 0.1, 1)
    });
    return () => {
      route.params?.onDismiss?.(action.current);
    };
  }, [heightDevice, route.params, translateY]);

  /**
   * handler dismiss
   */
  const onDismiss = useCallback((force = false, callback) => {
    if (barrierDismissible && !force) {
      return;
    }
    const closeAnimation = (cb = () => {}) => {
      translateY.value = withTiming(heightDevice, {
        duration: 200,
        easing: Easing.bezier(0.3, 0.0, 0.8, 0.15)
      }, () => runOnJS(cb)());
    };
    closeAnimation(() => {
      runOnJS(() => {
        navigator?.pop();
        callback?.();
      })();
    });
  }, [barrierDismissible, heightDevice, navigator, translateY]);

  /**
   * on request close
   */
  const onRequestClose = useCallback(callback => {
    onDismiss(true, callback);
  }, [onDismiss]);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{
        translateY: translateY.value
      }]
    };
  });
  const animatedOverlayStyle = useAnimatedStyle(() => {
    return {
      opacity: interpolate(translateY.value, [0, heightDevice], [1, 0], Extrapolation.CLAMP)
    };
  });

  /**
   * render header
   */
  const renderHeader = () => {
    return /*#__PURE__*/_jsxs(View, {
      style: {
        backgroundColor,
        borderTopLeftRadius: Radius.M,
        borderTopRightRadius: Radius.M
      },
      ...panResponder.panHandlers,
      children: [/*#__PURE__*/_jsx(SizedBox, {
        height: Spacing.L,
        children: /*#__PURE__*/_jsx(View, {
          style: [styles.indicator, {
            backgroundColor: theme.colors.background.disable
          }]
        })
      }), /*#__PURE__*/_jsxs(View, {
        style: styles.header,
        children: [header ? /*#__PURE__*/_jsx(View, {
          style: Styles.flex,
          children: header
        }) : /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(View, {
            style: styles.iconButton
          }), /*#__PURE__*/_jsx(Text, {
            typography: 'callout',
            fontWeight: 'bold',
            style: [Styles.flex, Styles.textCenter],
            children: title
          })]
        }), /*#__PURE__*/_jsx(TouchableOpacity, {
          style: styles.iconButton,
          onPress: () => {
            action.current = 'icon';
            onDismiss(true);
          },
          children: /*#__PURE__*/_jsx(Icon, {
            name: 'close',
            color: theme.colors.text.default,
            size: 24
          })
        })]
      })]
    });
  };
  return /*#__PURE__*/_jsx(View, {
    style: StyleSheet.absoluteFillObject,
    children: /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
      behavior: Platform.select({
        ios: 'padding',
        android: undefined
      }),
      keyboardVerticalOffset: keyboardVerticalOffset ?? -20,
      enabled: useKeyboardAvoidingView,
      style: styles.container,
      children: [/*#__PURE__*/_jsx(Pressable, {
        style: StyleSheet.absoluteFillObject,
        onPress: () => {
          action.current = 'overlay';
          onDismiss();
        },
        children: /*#__PURE__*/_jsx(Animated.View, {
          style: [styles.overlay, animatedOverlayStyle]
        })
      }), /*#__PURE__*/_jsxs(Animated.View, {
        style: animatedStyle,
        children: [renderHeader(), /*#__PURE__*/_jsxs(View, {
          style: {
            backgroundColor: backgroundColor
          },
          children: [/*#__PURE__*/_jsx(Screen, {
            ...params,
            onRequestClose: onRequestClose
          }), /*#__PURE__*/_jsx(View, {
            style: {
              height: Math.min(insets.bottom, 21)
            }
          })]
        })]
      })]
    })
  });
};
const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: Colors.modal
  },
  container: {
    flex: 1,
    justifyContent: 'flex-end'
  },
  indicator: {
    width: 40,
    height: 4,
    borderRadius: Radius.S,
    position: 'absolute',
    alignSelf: 'center',
    top: Spacing.S
  },
  header: {
    height: 56,
    flexDirection: 'row',
    alignItems: 'center'
  },
  iconButton: {
    width: 24,
    height: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginHorizontal: Spacing.M
  }
});
export default BottomSheet;
//# sourceMappingURL=BottomSheet.js.map