"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TeleportModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const expo_image_1 = require("expo-image");
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = require("react");
const react_native_1 = require("react-native");
const __1 = require("../..");
const streamplace_store_1 = require("../../streamplace-store");
const ui_1 = require("../ui");
const TeleportModal = ({ open, onOpenChange, onSubmit, }) => {
    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
    const [selectedStream, setSelectedStream] = (0, react_1.useState)(null);
    const [countdownSeconds, setCountdownSeconds] = (0, react_1.useState)("10");
    const { theme } = (0, ui_1.useTheme)();
    const liveUsersCache = (0, streamplace_store_1.useStreamplaceStore)((state) => state.liveUsers);
    const liveUsersLoading = (0, streamplace_store_1.useStreamplaceStore)((state) => state.liveUsersLoading);
    const [liveUsers, setLiveUsers] = (0, react_1.useState)(liveUsersCache);
    (0, react_1.useEffect)(() => {
        setLiveUsers(liveUsersCache);
    }, [liveUsersCache]);
    const profiles = (0, __1.useAvatars)(liveUsers?.map((u) => u.author?.did || "") || []);
    const filteredStreams = (0, react_1.useMemo)(() => {
        if (!liveUsers)
            return [];
        if (!searchQuery.trim())
            return liveUsers;
        const query = searchQuery.toLowerCase();
        // filter by handle or stream title
        return liveUsers.filter((stream) => stream.author?.handle?.toLowerCase().includes(query) ||
            stream.record.title?.toString().toLowerCase().includes(query));
    }, [liveUsers, searchQuery]);
    const handleCancel = () => {
        setSearchQuery("");
        setSelectedStream(null);
        setCountdownSeconds("10");
        onOpenChange(false);
    };
    const handleSubmit = () => {
        if (!selectedStream?.author?.handle)
            return;
        const countdown = parseInt(countdownSeconds, 10);
        if (isNaN(countdown) || countdown < 5 || countdown > 300) {
            return;
        }
        onSubmit(selectedStream.author.handle, countdown);
        handleCancel();
    };
    return ((0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDialog, { open: open, onOpenChange: onOpenChange, showCloseButton: false, variant: "default", size: "xl", dismissible: false, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.py[2]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.layout.flex.row, __1.zero.layout.flex.justify.between], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.mb[4], __1.zero.gap.all[1], __1.zero.layout.flex.column], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "2xl", children: "Teleport to another live streamer" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Select a streamer to teleport your viewers to their stream." })] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleCancel, style: [{ padding: 8 }], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.X, { color: theme.colors.mutedForeground }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [__1.zero.mb[4]], children: (0, jsx_runtime_1.jsx)(ui_1.Input, { value: searchQuery, onChangeText: setSearchQuery, placeholder: "Search by handle...", autoCapitalize: "none", autoCorrect: false }) }), liveUsersLoading && !liveUsers ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [__1.zero.py[8], { alignItems: "center" }], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Loading live users..." }) })) : filteredStreams.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [__1.zero.py[8], { alignItems: "center" }], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: searchQuery
                                ? "No matching live users found"
                                : "No live users found" }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [{ maxHeight: 400 }], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                {
                                    flexDirection: "row",
                                    flexWrap: "wrap",
                                    gap: 12,
                                },
                            ], children: filteredStreams.map((stream) => {
                                const isSelected = selectedStream?.uri === stream.uri;
                                const profile = profiles[stream.author?.did];
                                return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setSelectedStream(stream), style: [
                                        {
                                            width: "49.2%",
                                            minWidth: 200,
                                        },
                                    ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                            {
                                                backgroundColor: theme.colors.muted,
                                                borderRadius: 12,
                                                overflow: "hidden",
                                                borderWidth: 2,
                                                borderColor: isSelected
                                                    ? theme.colors.primary
                                                    : "transparent",
                                            },
                                        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                                    {
                                                        width: "100%",
                                                        aspectRatio: 16 / 9,
                                                        backgroundColor: theme.colors.card,
                                                        position: "relative",
                                                    },
                                                ], children: [(0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: {
                                                            uri: "/api/playback/" +
                                                                stream.author.did +
                                                                "/stream.jpg",
                                                        }, style: {
                                                            width: "100%",
                                                            height: "100%",
                                                        }, contentFit: "cover" }), isSelected && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                                            {
                                                                position: "absolute",
                                                                top: 8,
                                                                right: 8,
                                                                backgroundColor: theme.colors.primary,
                                                                borderRadius: 999,
                                                                width: 24,
                                                                height: 24,
                                                                alignItems: "center",
                                                                justifyContent: "center",
                                                                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.6)",
                                                            },
                                                        ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 16, color: "white" }) })), stream.viewerCount && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                                            {
                                                                position: "absolute",
                                                                top: 8,
                                                                left: 8,
                                                                backgroundColor: "rgba(0, 0, 0, 0.75)",
                                                                borderRadius: 999,
                                                                paddingHorizontal: 8,
                                                                paddingVertical: 4,
                                                            },
                                                        ], children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { style: [{ fontSize: 12, color: "white" }], children: [stream.viewerCount.count, " viewer", stream.viewerCount.count !== 1 ? "s" : ""] }) }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                                    {
                                                        padding: 12,
                                                        flexDirection: "row",
                                                        gap: 8,
                                                        alignItems: "center",
                                                    },
                                                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                                            {
                                                                width: 40,
                                                                height: 40,
                                                                borderRadius: 20,
                                                                overflow: "hidden",
                                                                backgroundColor: theme.colors.card,
                                                                flexShrink: 0,
                                                            },
                                                        ], children: profile?.avatar ? ((0, jsx_runtime_1.jsx)(expo_image_1.Image, { source: {
                                                                uri: profile.avatar,
                                                            }, style: { width: "100%", height: "100%" }, contentFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                                                width: "100%",
                                                                height: "100%",
                                                                backgroundColor: theme.colors.muted,
                                                            } })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1, minWidth: 0 }], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", children: stream.author?.handle }), stream.record.title ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { numberOfLines: 1, ellipsizeMode: "tail", style: [
                                                                    {
                                                                        fontSize: 12,
                                                                        color: theme.colors.textMuted,
                                                                    },
                                                                ], children: stream.record.title })) : null] })] })] }) }, stream.uri));
                            }) }) }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                    __1.zero.mt[8],
                    __1.zero.layout.flex.row,
                    __1.zero.layout.flex.justify.end,
                    __1.zero.gap.all[2],
                ], children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "secondary", onPress: handleCancel, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(ui_1.Button, { width: "min", variant: "primary", onPress: handleSubmit, disabled: !selectedStream, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Teleport" }) })] })] }));
};
exports.TeleportModal = TeleportModal;
//# sourceMappingURL=teleport-modal.js.map