import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Player } from '@remotion/player';
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
import { PALETTE } from '../layout/colors';
import { useColorMode } from '../layout/use-color-mode';
import { SectionTitle } from '../VideoAppsTitle';
import { getDataAndProps, HomepageVideoComp, } from './Comp';
import { DemoError } from './DemoError';
import { RenderButton } from './DemoRender';
import { DownloadNudge } from './DownloadNudge';
import { DragAndDropNudge } from './DragAndDropNudge';
import { PlayerControls } from './PlayerControls';
import { ThemeNudge } from './ThemeNudge';
const style = {
    width: '100%',
    aspectRatio: '640 / 360',
    borderBottom: `2px solid ${PALETTE.BOX_STROKE}`,
    touchAction: 'none', // prevent page from scrolling when dragging children on mobile
};
const playerWrapper = {
    border: `2px solid ${PALETTE.BOX_STROKE}`,
    borderBottom: `4px solid ${PALETTE.BOX_STROKE}`,
    borderRadius: 8,
    width: '100%',
    overflow: 'hidden',
};
export const Demo = () => {
    const { colorMode } = useColorMode();
    const [data, setData] = useState(null);
    const ref = useRef(null);
    const [isFullscreen, setIsFullscreen] = useState(false);
    const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
    const [emojiIndex, setEmojiIndex] = useState(0);
    const [error, setError] = useState(false);
    useEffect(() => {
        getDataAndProps()
            .then((d) => {
            setData(d);
        })
            .catch((err) => {
            // eslint-disable-next-line no-console
            console.log(err);
            setError(true);
        });
    }, []);
    useEffect(() => {
        const { current: playerRef } = ref;
        if (!playerRef || !data) {
            return;
        }
        const onFullscreenChange = () => {
            setIsFullscreen(playerRef.isFullscreen());
        };
        playerRef.addEventListener('fullscreenchange', onFullscreenChange);
        return () => {
            playerRef.removeEventListener('fullscreenchange', onFullscreenChange);
        };
    }, [data]);
    const updateCardOrder = useCallback((newCardOrder) => {
        setCardOrder(newCardOrder);
    }, []);
    const props = useMemo(() => {
        var _a, _b;
        return {
            theme: colorMode,
            onToggle: () => {
                var _a;
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.toggle();
            },
            cardOrder,
            updateCardOrder,
            location: (_a = data === null || data === void 0 ? void 0 : data.location) !== null && _a !== void 0 ? _a : null,
            trending: (_b = data === null || data === void 0 ? void 0 : data.trending) !== null && _b !== void 0 ? _b : null,
            onClickLeft: () => {
                setEmojiIndex((e) => e - 1);
            },
            onClickRight: () => {
                setEmojiIndex((e) => e + 1);
            },
            emojiIndex,
        };
    }, [cardOrder, emojiIndex, colorMode, data, updateCardOrder]);
    const onError = useCallback(() => {
        setError(true);
    }, []);
    return (_jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx(SectionTitle, { children: "Demo" }), _jsxs("div", { style: { height: 140, position: 'relative' }, children: [_jsx(DragAndDropNudge, {}), _jsx(ThemeNudge, {})] }), _jsxs("div", { style: playerWrapper, children: [_jsx(Player, { ref: ref, component: HomepageVideoComp, compositionWidth: 640, compositionHeight: 360, durationInFrames: 120, fps: 30, autoPlay: true, controls: isFullscreen, clickToPlay: false, style: style, initiallyMuted: true, inputProps: props, acknowledgeRemotionLicense: true, numberOfSharedAudioTags: 0, loop: true }), _jsx(PlayerControls, { playerRef: ref, durationInFrames: 120, fps: 30, children: _jsx(RenderButton, { onError: onError, renderData: data
                                ? {
                                    cardOrder,
                                    emojiIndex,
                                    location: data.location,
                                    theme: colorMode,
                                    trending: data.trending,
                                }
                                : null, playerRef: ref }) })] }), error ? _jsx(DemoError, {}) : null, _jsx(DownloadNudge, {})] }));
};
