import React from 'react';
import { useSelector } from 'react-redux';

import { IReduxState } from '../../app/types';

import SecondScreenGallery from './SecondScreenGallery';
import SecondScreenSharedVideo from './SecondScreenSharedVideo';
import SecondScreenSingle from './SecondScreenSingle';
import SecondScreenStage from './SecondScreenStage';
import SecondScreenWhiteboard from './SecondScreenWhiteboard';

/**
 * The type of the React {@code Component} props of {@link SecondScreenView}.
 */
interface IProps {

    /**
     * The id of the second-screen window this view renders into.
     */
    id: string;

    /**
     * The second-screen window, needed to render a track in its own realm.
     */
    win: Window;
}

/**
 * Routes a single second-screen window to a layout from its redux source
 * descriptor. A {@code whiteboard} source renders the {@link SecondScreenWhiteboard}
 * iframe; a {@code sharedvideo} source renders the meeting's shared video via
 * {@link SecondScreenSharedVideo}; a {@code screenshare} source renders that
 * screenshare full-bleed; a {@code tile} source renders the
 * {@link SecondScreenGallery} grid; a stage or participant source renders the
 * {@link SecondScreenStage} layout (featured participant plus filmstrip); any
 * other source renders the single track/avatar via {@link SecondScreenSingle}.
 * Each layout resolves its own state, so the potentially expensive
 * {@code resolveSource} selector only runs where it is needed. Portaled into
 * the second window by {@link SecondScreenPortals}.
 *
 * @param {IProps} props - The component props.
 * @returns {ReactElement}
 */
const SecondScreenView = ({ id, win }: IProps) => {
    const source = useSelector((state: IReduxState) => state['features/multi-screen'].screens[id]?.source);

    if (source?.role === 'whiteboard') {
        return <SecondScreenWhiteboard />;
    }

    if (source?.role === 'sharedvideo') {
        return (
            <SecondScreenSharedVideo
                id = { id } />
        );
    }

    // Before the participant check below: a screenshare names its virtual
    // screenshare participant to say which one to show, but it is still shown
    // full-bleed on its own rather than in the stage layout.
    if (source?.role === 'screenshare') {
        return (
            <SecondScreenSingle
                id = { id }
                win = { win } />
        );
    }

    if (source?.role === 'tile') {
        return (
            <SecondScreenGallery
                win = { win } />
        );
    }

    if (source && (source.role === 'stage' || Boolean(source.participant))) {
        return (
            <SecondScreenStage
                id = { id }
                win = { win } />
        );
    }

    return (
        <SecondScreenSingle
            id = { id }
            win = { win } />
    );
};

export default SecondScreenView;