import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Audio } from '@remotion/media';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { AbsoluteFill, prefetch, staticFile, } from 'remotion';
import { Cards } from './Cards';
export const getDataAndProps = async () => {
    const location = (await fetch('https://bugs-five.vercel.app/api/location').then((res) => res.json()));
    const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
        .then((res) => res.json())
        .then((data) => {
        return {
            repos: data.trending.repos.slice(0, 3),
            date: data.trending.dateFetched,
            temperatureInCelsius: Math.round(data.temperature),
            countryLabel: data.countryLabel,
            countryPaths: data.countryPaths,
        };
    });
    return { trending, location };
};
export const calculateMetadata = ({ props, }) => {
    return {
        durationInFrames: 120,
        fps: 30,
        height: 360,
        width: 640,
        props: {
            ...props,
        },
    };
};
const fireAudio = staticFile('fire.mp3');
const partyHornAudio = staticFile('partyhorn.mp3');
const sadAudio = staticFile('sad.mp3');
export const HomepageVideoComp = ({ theme, onToggle, cardOrder, updateCardOrder, location, trending, emojiIndex, onClickLeft, onClickRight, }) => {
    const [rerenders, setRerenders] = useState(0);
    const onUpdate = useCallback((newIndices) => {
        setRerenders(rerenders + 1);
        updateCardOrder(newIndices);
    }, [rerenders, updateCardOrder]);
    const emoji = useMemo(() => {
        if ((emojiIndex + 10000 * 3) % 3 === 1) {
            return 'melting';
        }
        if ((emojiIndex + 10000 * 3) % 3 === 2) {
            return 'fire';
        }
        return 'partying-face';
    }, [emojiIndex]);
    const audioSrc = useMemo(() => {
        if (emoji === 'fire') {
            return fireAudio;
        }
        if (emoji === 'partying-face') {
            return partyHornAudio;
        }
        return sadAudio;
    }, [emoji]);
    useEffect(() => {
        const a = prefetch(fireAudio);
        const b = prefetch(partyHornAudio);
        const c = prefetch(sadAudio);
        return () => {
            a.free();
            b.free();
            c.free();
        };
    }, []);
    return (_jsxs(AbsoluteFill, { style: {
            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
        }, children: [_jsx(Cards, { onUpdate: onUpdate, indices: cardOrder, theme: theme, location: location, trending: trending, onToggle: onToggle, onLeft: onClickLeft, onRight: onClickRight, emojiName: emoji }, rerenders), audioSrc ? _jsx(Audio, { src: audioSrc }) : null] }));
};
