"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Resizable = Resizable;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_gesture_handler_1 = require("react-native-gesture-handler");
const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
const hooks_1 = require("../../hooks");
const atoms_1 = require("../../lib/theme/atoms");
const view_1 = require("./view");
const AnimatedView = react_native_reanimated_1.default.createAnimatedComponent(view_1.View);
const { height: SCREEN_HEIGHT } = react_native_1.Dimensions.get("window");
const TIMING_CONFIG = {
    duration: 400,
    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.quad),
};
function Resizable({ startingPercentage, isPlayerRatioGreater, style = {}, children, renderAbove, }) {
    const { slideKeyboard } = (0, hooks_1.useKeyboardSlide)();
    const { bottom: safeBottom } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
    const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.55;
    const MIN_HEIGHT = -(SCREEN_HEIGHT - safeBottom) * 0.2;
    const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
    const sheetHeight = (0, react_native_reanimated_1.useSharedValue)(MIN_HEIGHT);
    const startHeight = (0, react_native_reanimated_1.useSharedValue)(MIN_HEIGHT);
    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(true);
    const wasCollapsed = (0, react_native_reanimated_1.useSharedValue)(true);
    (0, react_1.useEffect)(() => {
        setTimeout(() => {
            const targetHeight = startingPercentage
                ? startingPercentage * SCREEN_HEIGHT
                : MIN_HEIGHT;
            sheetHeight.value = (0, react_native_reanimated_1.withTiming)(targetHeight, TIMING_CONFIG);
            setIsCollapsed(targetHeight < COLLAPSE_HEIGHT);
        }, 1000);
    }, []);
    const panGesture = react_native_gesture_handler_1.Gesture.Pan()
        .onStart(() => {
        startHeight.value = sheetHeight.value;
    })
        .onUpdate((event) => {
        let newHeight = startHeight.value - event.translationY;
        if (newHeight > MAX_HEIGHT)
            newHeight = MAX_HEIGHT;
        if (newHeight < MIN_HEIGHT)
            newHeight = MIN_HEIGHT;
        sheetHeight.value = newHeight;
        const nowCollapsed = newHeight < COLLAPSE_HEIGHT;
        if (nowCollapsed && !wasCollapsed.value) {
            sheetHeight.value = (0, react_native_reanimated_1.withTiming)(MIN_HEIGHT, TIMING_CONFIG);
            wasCollapsed.value = true;
            (0, react_native_reanimated_1.runOnJS)(setIsCollapsed)(true);
        }
        else if (!nowCollapsed && wasCollapsed.value) {
            wasCollapsed.value = false;
            (0, react_native_reanimated_1.runOnJS)(setIsCollapsed)(false);
        }
    });
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
        opacity: (0, react_native_reanimated_1.interpolate)(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], react_native_reanimated_1.Extrapolation.CLAMP),
        transform: [
            {
                translateY: slideKeyboard +
                    Math.max(0, -sheetHeight.value) +
                    (slideKeyboard < 0 ? 0 : -safeBottom) -
                    (Math.abs(slideKeyboard) > 1 ? 32 : 16),
            },
        ],
    }));
    const handleAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        opacity: sheetHeight.value < COLLAPSE_HEIGHT ? 1 : 0,
        transform: [
            {
                translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : (0, react_native_reanimated_1.withSpring)(20),
            },
        ],
    }));
    const aboveElementStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        // show inside area when not collapsed, and show outside area when collapsed
        height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
        transform: [
            {
                translateY: sheetHeight.value < COLLAPSE_HEIGHT
                    ? (0, react_native_reanimated_1.withSpring)(-120)
                    : (0, react_native_reanimated_1.withSpring)(20),
            },
        ],
    }));
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                    handleAnimatedStyle,
                    atoms_1.layout.position.absolute,
                    atoms_1.bottom[4],
                    atoms_1.w.percent[100],
                    atoms_1.layout.flex.center,
                    atoms_1.zIndex[1],
                ], children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.Pressable, { onPress: () => {
                        const isCurrentlyCollapsed = sheetHeight.value === MIN_HEIGHT;
                        sheetHeight.value = isCurrentlyCollapsed
                            ? (0, react_native_reanimated_1.withTiming)(MAX_HEIGHT, TIMING_CONFIG)
                            : (0, react_native_reanimated_1.withTiming)(MIN_HEIGHT, TIMING_CONFIG);
                        setIsCollapsed(!isCurrentlyCollapsed);
                    }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
                            atoms_1.p[1],
                            {
                                borderRadius: 999,
                                backgroundColor: "rgba(0, 0, 0, 0.5)",
                                overflow: "hidden",
                            },
                        ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronUp, { size: 32, color: "white", style: { marginBottom: 1, marginTop: -1 } }) }) }) }), (0, jsx_runtime_1.jsxs)(AnimatedView, { style: [
                    animatedStyle,
                    isPlayerRatioGreater
                        ? atoms_1.layout.position.relative
                        : atoms_1.layout.position.absolute,
                    atoms_1.bottom[0],
                    atoms_1.zIndex[1],
                    atoms_1.w.percent[100],
                    {
                        backgroundColor: "rgba(0, 0, 0, 0.5)",
                        overflow: "visible",
                        borderTopLeftRadius: 16,
                        borderTopRightRadius: 16,
                        minWidth: "100%",
                    },
                    style,
                ], children: [(0, jsx_runtime_1.jsx)(view_1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.justifyCenter, atoms_1.h[2]], children: (0, jsx_runtime_1.jsx)(view_1.View, { style: { alignItems: "center", width: "100%" }, children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(view_1.View
                                // Make the touch area much larger, but keep the visible handle small
                                , { 
                                    // Make the touch area much larger, but keep the visible handle small
                                    style: {
                                        height: 30, // Large touch area
                                        width: 120, // Wide enough for thumbs
                                        alignItems: "center",
                                        justifyContent: "center",
                                        //backgroundColor: "rgba(0,255,255,0.1)",
                                        transform: [{ translateY: -30 }],
                                    }, children: (0, jsx_runtime_1.jsx)(view_1.View, { style: [
                                            atoms_1.w[32],
                                            {
                                                height: 6,
                                                backgroundColor: "#eeeeee66",
                                                borderRadius: 999,
                                                transform: [{ translateY: 5 }],
                                            },
                                        ] }) }) }) }) }), children] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                    aboveElementStyle,
                    {
                        width: "100%",
                        pointerEvents: "none",
                        position: "absolute",
                        bottom: 0,
                    },
                ], children: (0, jsx_runtime_1.jsx)(view_1.View, { style: {
                        pointerEvents: "auto",
                        width: "100%",
                        // hate doing it this way, but can't figure out
                        // how to make it size to content otherwise
                        minHeight: 50,
                        height: "100%",
                        maxHeight: 75,
                        flex: 0,
                    }, children: renderAbove?.(isCollapsed) }) })] }));
}
Resizable.displayName = "ResizableChatSheet";
//# sourceMappingURL=resizeable.js.map