import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
import { DisplayedEmoji } from './DisplayedEmoji';
const applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
    ref1.style.transform = `translateX(${transforms[0]}%)`;
    ref2.style.transform = `translateX(${transforms[1]}%)`;
    ref3.style.transform = `translateX(${transforms[2]}%)`;
};
const waitForRaq = async () => {
    await new Promise((resolve) => {
        requestAnimationFrame(resolve);
    });
};
const moveLeft = async ({ ref1, ref2, ref3, transforms }) => {
    for (let i = 0; i < 20; i++) {
        for (const idx in transforms) {
            transforms[idx] -= 5;
            if (transforms[idx] <= -200) {
                transforms[idx] += 300;
            }
        }
        applyTransforms({ ref1, ref2, ref3, transforms });
        await waitForRaq();
    }
};
const moveRight = async ({ ref1, ref2, ref3, transforms }) => {
    for (let i = 0; i < 20; i++) {
        for (const idx in transforms) {
            transforms[idx] += 5;
            if (transforms[idx] >= 100) {
                transforms[idx] -= 300;
            }
        }
        applyTransforms({ ref1, ref2, ref3, transforms });
        await waitForRaq();
    }
};
const emojiStyle = {
    width: '100%',
    position: 'absolute',
    top: 'calc(50% - 50px)',
};
const EmojiCardRefFn = ({ emojiIndex }, ref) => {
    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const ref3 = useRef(null);
    const transforms = useRef([-100, 0, 100]);
    const onLeft = useCallback(() => {
        if (!ref1.current || !ref2.current || !ref3.current) {
            return;
        }
        moveLeft({
            ref1: ref1.current,
            ref2: ref2.current,
            ref3: ref3.current,
            transforms: transforms.current,
        });
    }, []);
    const onRight = useCallback(() => {
        if (!ref1.current || !ref2.current || !ref3.current) {
            return;
        }
        moveRight({
            ref1: ref1.current,
            ref2: ref2.current,
            ref3: ref3.current,
            transforms: transforms.current,
        });
    }, []);
    useEffect(() => {
        if (!ref1.current || !ref2.current || !ref3.current) {
            return;
        }
        applyTransforms({
            ref1: ref1.current,
            ref2: ref2.current,
            ref3: ref3.current,
            transforms: transforms.current,
        });
    }, []);
    useImperativeHandle(ref, () => {
        return {
            onLeft,
            onRight,
        };
    }, [onLeft, onRight]);
    useEffect(() => {
        if (!ref1.current || !ref2.current || !ref3.current) {
            return;
        }
        applyTransforms({
            ref1: ref1.current,
            ref2: ref2.current,
            ref3: ref3.current,
            transforms: transforms.current,
        });
    }, []);
    const env = useRemotionEnvironment();
    return (_jsxs(AbsoluteFill, { style: {
            justifyContent: 'center',
            alignItems: 'center',
            overflow: 'hidden',
        }, children: [_jsx("div", { style: {
                    color: '#0b84f3',
                    fontFamily: 'GTPlanar',
                    fontWeight: '500',
                    fontSize: 13,
                    textAlign: 'center',
                    position: 'absolute',
                    marginTop: -90,
                }, children: "Choose an emoji" }), _jsx("div", { style: {
                    position: 'absolute',
                    width: '100%',
                    display: 'flex',
                    whiteSpace: 'nowrap',
                    height: '100%',
                }, children: env.isRendering ? (_jsx("div", { style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: emojiIndex }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref1, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'melting' }) }), _jsx("div", { ref: ref2, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'partying-face' }) }), _jsx("div", { ref: ref3, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'fire' }) })] })) })] }));
};
export const EmojiCard = forwardRef(EmojiCardRefFn);
