"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VodComments = VodComments;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const ui_1 = require("../../ui");
const vod_interactions_1 = require("../../vod-store/vod-interactions");
const text_1 = require("../ui/text");
const textarea_1 = require("../ui/textarea");
function VodComments({ videoUri }) {
    const [comments, setComments] = (0, react_1.useState)([]);
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [draft, setDraft] = (0, react_1.useState)("");
    const [submitting, setSubmitting] = (0, react_1.useState)(false);
    const [cursor, setCursor] = (0, react_1.useState)();
    const getComments = (0, vod_interactions_1.useGetVodComments)();
    const createComment = (0, vod_interactions_1.useCreateVodComment)();
    const { theme } = (0, ui_1.useTheme)();
    const loadComments = (0, react_1.useCallback)(async () => {
        setLoading(true);
        try {
            const result = await getComments(videoUri, 50, cursor);
            setComments((prev) => cursor ? [...prev, ...result.comments] : result.comments);
            setCursor(result.cursor);
        }
        catch (e) {
            console.error("Failed to load comments", e);
        }
        finally {
            setLoading(false);
        }
    }, [videoUri, cursor, getComments]);
    (0, react_1.useEffect)(() => {
        setCursor(undefined);
        loadComments();
    }, [videoUri]);
    const handleSubmit = (0, react_1.useCallback)(async () => {
        if (!draft.trim())
            return;
        setSubmitting(true);
        try {
            await createComment({ text: draft.trim(), video: videoUri });
            setDraft("");
            setCursor(undefined);
            await loadComments();
        }
        catch (e) {
            console.error("Failed to submit comment", e);
        }
        finally {
            setSubmitting(false);
        }
    }, [draft, videoUri, createComment, loadComments]);
    const renderComment = (0, react_1.useCallback)(({ item }) => {
        const record = item.record;
        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                ui_1.py[2],
                ui_1.borders.bottom.width.thin,
                { borderBottomColor: theme.colors.border },
            ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, ui_1.gap.all[2]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { weight: "semibold", children: item.author.handle || item.author.did }), (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", style: { color: theme.colors.textMuted }, children: new Date(item.indexedAt).toLocaleDateString() })] }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [ui_1.mt[1]], children: record.text }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [ui_1.layout.flex.row, ui_1.gap.all[3], ui_1.mt[1]], children: (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", style: { color: theme.colors.textMuted }, children: item.likeCount > 0 ? `${item.likeCount} likes` : "" }) })] }));
    }, [theme]);
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: ui_1.flex.values[1], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { weight: "semibold", size: "lg", style: [ui_1.mb[3]], children: "Comments" }), loading && comments.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, {})) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: comments, renderItem: renderComment, keyExtractor: (item) => item.uri, onEndReached: cursor ? loadComments : undefined, onEndReachedThreshold: 0.5, style: ui_1.flex.values[1] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                    ui_1.layout.flex.row,
                    ui_1.gap.all[2],
                    ui_1.mt[3],
                    ui_1.pt[3],
                    ui_1.borders.top.width.thin,
                    { borderTopColor: theme.colors.border },
                ], children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: draft, onChangeText: setDraft, placeholder: "Add a comment...", multiline: true, numberOfLines: 2, editable: !submitting, enterKeyHint: "send", submitBehavior: "submit", onSubmitEditing: (e) => {
                            e.preventDefault();
                            handleSubmit();
                        }, style: ui_1.flex.values[1] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handleSubmit, disabled: submitting || !draft.trim(), style: [
                            ui_1.r.md,
                            ui_1.px[4],
                            ui_1.layout.flex.center,
                            {
                                backgroundColor: submitting
                                    ? theme.colors.muted
                                    : theme.colors.primary,
                            },
                        ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: "#fff" }, weight: "semibold", children: submitting ? "..." : "Post" }) })] })] }));
}
//# sourceMappingURL=vod-comments.js.map