"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderChatMessage = exports.RichTextMessage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const facet_1 = require("../../lib/facet");
const atoms_1 = require("../../lib/theme/atoms");
const format_handle_1 = require("../../utils/format-handle");
const ui_1 = require("../ui");
const livestream_store_1 = require("../../livestream-store");
const text_1 = require("../ui/text");
const badge_1 = require("./badge");
const user_profile_card_1 = require("./user-profile-card");
const getRgbColor = (color) => color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : ui_1.colors.gray[500];
const renderSegment = (seg, index, userCache) => {
    const ftr = seg.features?.[0];
    if (!ftr) {
        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: seg.text }, `text-${index}`);
    }
    if (ftr.$type === "app.bsky.richtext.facet#link") {
        const linkFtr = ftr;
        return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: ui_1.atoms.colors.ios.systemBlue, cursor: "pointer" }, 
            // @ts-ignore href renders as <a> on web
            href: react_native_1.Platform.OS === "web" ? linkFtr.uri : undefined, accessibilityRole: "link", onPress: (e) => {
                if (react_native_1.Platform.OS === "web") {
                    e.preventDefault();
                    window.open(linkFtr.uri, "_blank");
                }
                else {
                    react_native_1.Linking.openURL(linkFtr.uri || "");
                }
            }, children: seg.text }, `link-${index}`));
    }
    if (ftr.$type === "app.bsky.richtext.facet#mention") {
        const mtnFtr = ftr;
        const profile = userCache?.[mtnFtr.did];
        return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: getRgbColor(profile?.color), cursor: "pointer" }, onPress: () => react_native_1.Linking.openURL(`https://bsky.app/profile/${mtnFtr.did || ""}`), children: seg.text }, `mention-${index}`));
    }
    return (0, jsx_runtime_1.jsx)(text_1.Text, { children: seg.text }, `unknown-facet-${index}`);
};
const RichTextMessage = ({ text, facets, }) => {
    const userCache = (0, livestream_store_1.useLivestreamStore)((state) => state.authors);
    if (!facets?.length)
        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: text });
    let segs = (0, facet_1.segmentize)(text, facets);
    return segs.map((seg, i) => renderSegment(seg, i, userCache));
};
exports.RichTextMessage = RichTextMessage;
exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item, showReply = true, showTime = true, }) {
    const formatTime = (0, react_1.useCallback)((dateString) => {
        return new Date(dateString).toLocaleString(undefined, {
            hour: "2-digit",
            minute: "2-digit",
            hour12: false,
        });
    }, []);
    const replyTo = item.replyTo || null;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    atoms_1.gap.all[2],
                    ui_1.layout.flex.row,
                    { minWidth: 0, maxWidth: "100%" },
                    atoms_1.borders.left.width.medium,
                    atoms_1.borders.left.color.gray[700],
                    atoms_1.ml[4],
                    atoms_1.pl[4],
                    atoms_1.opacity[80],
                ], children: (0, jsx_runtime_1.jsxs)(text_1.Text, { numberOfLines: 1, style: [
                        atoms_1.flex.shrink[1],
                        atoms_1.mr[4],
                        { minWidth: 0, overflow: "hidden" },
                    ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                                color: getRgbColor(replyTo.chatProfile?.color),
                                fontWeight: "thin",
                            }, children: (0, format_handle_1.formatHandleWithAt)(replyTo.author) }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                                color: ui_1.colors.gray[300],
                                fontStyle: "italic",
                            }, children: replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.layout.flex.row, { minWidth: 0, maxWidth: "100%" }], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                            fontVariant: ["tabular-nums"],
                            color: ui_1.colors.gray[400],
                            marginRight: 8,
                            marginTop: react_native_1.Platform.OS === "web" ? 1 : 2,
                        }, children: formatTime(item.record.createdAt) })), (0, jsx_runtime_1.jsxs)(text_1.Text, { style: [atoms_1.flex.shrink[1], { minWidth: 0 }], children: [(0, jsx_runtime_1.jsx)(user_profile_card_1.UserProfileCard, { uri: item.uri, author: item.author, badges: item.badges, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                                        // display: inline is a no-op on mobile
                                        display: react_native_1.Platform.OS === "web" ? "inline" : undefined,
                                        alignItems: "center",
                                        justifyContent: "flex-end",
                                        flexDirection: "row",
                                        marginBottom: -4.5,
                                    }, children: [(0, jsx_runtime_1.jsx)(badge_1.BadgeDisplayRow, { badges: item.badges }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                                                cursor: "pointer",
                                                color: getRgbColor(item.chatProfile?.color),
                                            }, children: (0, format_handle_1.formatHandleWithAt)(item.author) })] }) }), (0, jsx_runtime_1.jsx)(text_1.Text, { color: "default", children: ": " }), (0, jsx_runtime_1.jsx)(exports.RichTextMessage, { text: item.record.text, facets: item.record.facets || [] })] })] })] }));
}, (prevProps, nextProps) => {
    return (prevProps.item.author.handle === nextProps.item.author.handle &&
        prevProps.item.record.text === nextProps.item.record.text &&
        prevProps.item.uri === nextProps.item.uri);
});
//# sourceMappingURL=chat-message.js.map