import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
import { UrlType, View } from '../Models/View';
import { ScheduledView } from '../Models/ScheduledView';
import { AuthContext } from '../../Context/AuthContext';
import Idle from './Idle';
import UrlView from './Url';

export interface ViewRendererProps {
    guestMode?: boolean;
    alwaysOnTop?: boolean;
    mouseInteraction?: boolean;
    scheduledView?: ScheduledView;
    view?: View;
    onReady?: () => void;
}

export interface ViewProps {
    mouseInteraction?: boolean;
    onReady: () => void;
}

const ViewRenderer: FunctionComponent<ViewRendererProps> = ({ children, alwaysOnTop, guestMode, mouseInteraction, scheduledView, view, onReady }) => {
    /** Max loading time in ms, switches to ready if loading time is exceeded. */
    const maxLoadingTime = 8000;

    // Determines if the content is ready to show, onReady is only called once because of readyCalled.
    const [ready, setReady] = useState(false);
    const [readyCalled, setReadyCalled] = useState(false);

    const { auth } = useContext(AuthContext);

    /** Render the view corresponding to the type attribute. */
    const renderView = (): JSX.Element | undefined => {
        const viewProps = { onReady: () => setReady(true), mouseInteraction };

        if (!view || !view.type) {
            return <Idle { ...viewProps } />;
        }

        switch (view.type) {
            case 'url':
                return <UrlView { ...(view as View<UrlType>).payload } { ...viewProps } />;

            default:
                return renderServerView(view, viewProps);
        }
    };

    const renderServerView = (view: View, props: ViewProps): JSX.Element | undefined => {
        if (!auth) return;

        const url = new URL(`/api/views/${view.type}/${view.id}`, window.electron.url);
        url.searchParams.append('device', auth.deviceCode);
        scheduledView && url.searchParams.append('scheduled_view', scheduledView.id.toString());

        return <UrlView url={ url.href } { ...props } />;
    };

    useEffect(() => {
        if (!readyCalled && ready) {
            setReadyCalled(true);
            onReady && onReady();
        }
    }, [ready]);

    useEffect(() => {
        const readyTimer = setTimeout(() => setReady(true), maxLoadingTime);

        return () => {
            readyTimer && clearTimeout(readyTimer);
        };
    }, []);
    
    return (
        <div 
            className={ `fixed h-screen w-screen ${guestMode && view?.sensitive ? 'hidden' : 'block'} ${alwaysOnTop ? 'z-10' : 'z-0'} ${mouseInteraction ? 'pointer-events-auto' : 'pointer-events-none'}` }
            data-testid={ children ? 'view-children' : (view ? `view-${view.type}-${view.id}` : 'view-idle') }
        >
            { children || renderView() }
        </div>
    );
};
 
export default ViewRenderer;