import type { ComponentType } from "react"
import React, { useState, useEffect, useLayoutEffect } from "react"
import { RenderTarget } from "framer"

export function withSmartSession(Component): ComponentType {
    return (props) => {
        const isCanvas = RenderTarget.current() === RenderTarget.canvas

        const [shouldRender, setShouldRender] = useState(true)

        // Sync this value with startDelayMs + totalRevealMs + fadeMs from SmartPreloader
        const animationDuration = 2600

        useLayoutEffect(() => {
            if (!isCanvas && sessionStorage.getItem("preloaderPlayed")) {
                setShouldRender(false)
            }
        }, [isCanvas])

        useEffect(() => {
            if (isCanvas || !shouldRender) return

            const timer = setTimeout(() => {
                setShouldRender(false)
                sessionStorage.setItem("preloaderPlayed", "true")
            }, animationDuration)

            return () => clearTimeout(timer)
        }, [isCanvas, shouldRender, animationDuration])

        if (!shouldRender && !isCanvas) {
            return (
                <Component
                    {...props}
                    style={{
                        ...props.style,
                        display: "none",
                        pointerEvents: "none",
                    }}
                />
            )
        }

        return (
            <React.Fragment>
                {!isCanvas && (
                    <script
                        dangerouslySetInnerHTML={{
                            __html: `
                                (function(){
                                    try {
                                        if (sessionStorage.getItem("preloaderPlayed")) {
                                            var me = document.currentScript;
                                            if (me && me.parentElement) {
                                                me.parentElement.style.display = 'none';
                                            }
                                        }
                                    } catch(e) {}
                                })();
                            `,
                        }}
                    />
                )}
                <Component {...props} />
            </React.Fragment>
        )
    }
}