import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from '@remotion/design';
import { Heart } from '@remotion/shapes';
import { useCallback, useEffect, useState } from 'react';
import { REMOTION_PRO_ORIGIN } from './config';
import { formatLikeCount, getLikedIds, removeLikedId, saveLikedId, } from './prompt-helpers';
import { useHeartAnimation } from './use-heart-animation';
export const LikeButton = ({ submissionId, initialLikeCount }) => {
    const [liked, setLiked] = useState(false);
    const [likeCount, setLikeCount] = useState(initialLikeCount);
    const { scale, roundness, animate } = useHeartAnimation();
    useEffect(() => {
        setLiked(getLikedIds().has(submissionId));
    }, [submissionId]);
    const onClick = useCallback(async () => {
        if (liked) {
            setLiked(false);
            setLikeCount((c) => c - 1);
            removeLikedId(submissionId);
            try {
                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/unlike`, {
                    method: 'POST',
                    headers: { 'content-type': 'application/json' },
                    body: JSON.stringify({ submissionId }),
                });
            }
            catch (_a) {
                // Optimistic
            }
        }
        else {
            animate();
            setLiked(true);
            setLikeCount((c) => c + 1);
            saveLikedId(submissionId);
            try {
                await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/like`, {
                    method: 'POST',
                    headers: { 'content-type': 'application/json' },
                    body: JSON.stringify({ submissionId }),
                });
            }
            catch (_b) {
                // Optimistic
            }
        }
    }, [liked, submissionId, animate]);
    return (_jsx(Button, { className: `font-brand rounded-full flex items-center ${liked ? 'bg-brand text-white' : ''}`, onClick: onClick, style: { width: 90 }, children: _jsxs("div", { className: "flex items-center flex-row flex-1 w-[40px] justify-center", children: [_jsx(Heart, { height: 14, fill: liked ? 'white' : 'none', stroke: liked ? 'white' : 'var(--text-color)', strokeWidth: 2, bottomRoundnessAdjustment: roundness, style: { transform: `scale(${scale})` } }), _jsx("span", { style: { fontSize: 15, marginLeft: 10 }, children: formatLikeCount(likeCount) })] }) }));
};
