import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, useCallback, useEffect, useRef, useState, } from 'react';
import { AbsoluteFill, useRemotionEnvironment } from 'remotion';
import { Card } from './Card';
import { CurrentCountry } from './CurrentCountry';
import { EmojiCard } from './EmojiCard';
import { getInitialPositions } from './math';
import { Temperature } from './Temperature';
import { TrendingRepos } from './TrendingRepos';
export const Cards = ({ onUpdate, indices, theme, onToggle, onLeft: onLeftPress, onRight: onRightPress, emojiName, location, trending, }) => {
    const container = useRef(null);
    const [refs] = useState(() => {
        return new Array(4).fill(true).map(() => {
            return createRef();
        });
    });
    const positions = useRef(getInitialPositions());
    const shouldBePositions = useRef(getInitialPositions());
    const { isRendering } = useRemotionEnvironment();
    useEffect(() => {
        const { current } = container;
        if (!current) {
            return;
        }
        const onClick = (e) => {
            if (e.target !== current) {
                return;
            }
            onToggle();
        };
        current.addEventListener('click', onClick);
        return () => {
            current.removeEventListener('click', onClick);
        };
    }, [onToggle]);
    const ref = useRef(null);
    const onLeft = useCallback(() => {
        var _a;
        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onRight();
        onRightPress();
    }, [onRightPress]);
    const onRight = useCallback(() => {
        var _a;
        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onLeft();
        onLeftPress();
    }, [onLeftPress]);
    return (_jsx(AbsoluteFill, { ref: container, children: new Array(4).fill(true).map((_, i) => {
            var _a, _b, _c;
            const index = indices[i];
            const content = index === 0 ? (_jsx(TrendingRepos, { trending: trending, theme: theme })) : index === 1 ? (_jsx(Temperature, { city: (location === null || location === void 0 ? void 0 : location.city) ? decodeURIComponent(location === null || location === void 0 ? void 0 : location.city) : null, theme: theme, temperatureInCelsius: (_a = trending === null || trending === void 0 ? void 0 : trending.temperatureInCelsius) !== null && _a !== void 0 ? _a : null })) : index === 2 ? (_jsx(CurrentCountry, { countryPaths: (_b = trending === null || trending === void 0 ? void 0 : trending.countryPaths) !== null && _b !== void 0 ? _b : null, countryLabel: (_c = trending === null || trending === void 0 ? void 0 : trending.countryLabel) !== null && _c !== void 0 ? _c : null, theme: theme })) : (_jsx(EmojiCard, { ref: ref, emojiIndex: emojiName }));
            return (_jsx(Card
            // eslint-disable-next-line react/no-array-index-key
            , { onUpdate: onUpdate, 
                // @ts-expect-error
                refsToUse: refs, index: i, content: content, positions: positions, shouldBePositions: shouldBePositions, indices: indices, theme: theme, withSwitcher: index === 3 && !isRendering, onClickLeft: onLeft, onClickRight: onRight }, i));
        }) }));
};
