import { jsx as _jsx } from "react/jsx-runtime";
import { getLottieMetadata, Lottie, } from '@remotion/lottie';
import { useEffect, useMemo, useState } from 'react';
import { useDelayRender, useVideoConfig } from 'remotion';
export const DisplayedEmoji = ({ emoji }) => {
    const [data, setData] = useState(null);
    const { durationInFrames, fps } = useVideoConfig();
    const [browser, setBrowser] = useState(typeof document !== 'undefined');
    const { delayRender, continueRender, cancelRender } = useDelayRender();
    const src = useMemo(() => {
        if (emoji === 'melting') {
            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
        }
        if (emoji === 'partying-face') {
            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
        }
        if (emoji === 'fire') {
            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
        }
        throw new Error('Unknown emoji');
    }, [emoji]);
    const [handle] = useState(() => delayRender('Loading emojis!'));
    useEffect(() => {
        fetch(src)
            .then((res) => res.json())
            .then((json) => {
            var _a;
            setData({
                duration: (_a = getLottieMetadata(json)) === null || _a === void 0 ? void 0 : _a.durationInSeconds,
                data: json,
            });
            continueRender(handle);
        })
            .catch((err) => {
            cancelRender(err);
        });
    }, [handle, src, continueRender, cancelRender]);
    useEffect(() => {
        if (typeof document !== 'undefined') {
            setBrowser(true);
        }
    }, []);
    if (!browser) {
        return null;
    }
    if (!data) {
        return null;
    }
    const animDurtion = data.duration;
    const ratio = durationInFrames / fps / animDurtion;
    const closestInteger = ratio;
    const closestRatio = closestInteger / ratio;
    return (_jsx(Lottie, { style: {
            height: 100,
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
        }, loop: true, animationData: data.data, playbackRate: closestRatio }));
};
