import React, { ComponentType } from 'react';
// import { Transition, Transitioning } from 'react-native-reanimated';
import { Lifecycle } from '../containers/layout/Lifecycle';
import { LifecyclePhase } from '@workbench-stack/core';
import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
import { useAfterInteractions } from '../hooks/use-after-interactions';
import { Box, Spinner, SafeAreaView, Center } from '@gluestack-ui/themed';
import hoistNonReactStatics from 'hoist-non-react-statics';

export function withInteractionsManaged<Props>(
    Component: ComponentType<Props>,
    Placeholder: ComponentType | null = null,
    interationTime?: number,
) {
    const Wrapped = (props: Props) => {
        const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();

        React.useEffect(() => {
            if (interationTime) setInteractionsTimeOut(interationTime);
        }, [interationTime]);

        const LoadingComponent = () => (
            // <SafeAreaView flex={1}>
            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
                {<Spinner color={'$blue500'} />}
            </Center>
            // </SafeAreaView>
        );
        console.log('interactionsComplete', interactionsComplete);
        return (
            <>
                {interactionsComplete ? (
                    <Component {...props} />
                ) : (
                    <Animated.View
                        style={{
                            flex: 1,
                            opacity: opacity.value,
                            transform: [{ scale: opacity.value }],
                        }}
                    >
                        {Placeholder ? <Placeholder /> : <LoadingComponent />}
                    </Animated.View>
                )}
            </>
        );
    };

    hoistNonReactStatics(Wrapped, Component);
    return Wrapped;
}

export function withLifeCycleInteractionsManaged<Props>(
    Component: ComponentType<Props>,
    Placeholder: ComponentType | null = null,
    interationTime?: number,
) {
    const Wrapped = (props: Props) => {
        const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();

        React.useEffect(() => {
            if (interationTime) setInteractionsTimeOut(interationTime);
        }, [interationTime]);

        const LoadingComponent = () => (
            // <SafeAreaView flex={1}>
            <Center flex={1} justifyContent={'center'} alignItems={'center'}>
                {<Spinner color={'$blue500'} />}
            </Center>
            // </SafeAreaView>
        );
        console.log('interactionsComplete', interactionsComplete);
        return (
            <>
                {interactionsComplete ? (
                    <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
                        <Component {...props} />
                    </Lifecycle>
                ) : (
                    <Animated.View
                        style={{
                            flex: 1,
                            opacity: opacity.value,
                            transform: [{ scale: opacity.value }],
                        }}
                    >
                        {Placeholder ? <Placeholder /> : <LoadingComponent />}
                    </Animated.View>
                )}
            </>
        );
    };

    hoistNonReactStatics(Wrapped, Component);
    return Wrapped;
}

// export function withInteractionsManaged<Props>(
//     Component: ComponentType<Props>,
//     Placeholder: ComponentType | null = null,
// ) {
//     const Wrapped = (props: Props) => {
//         const { transitionRef, interactionsComplete,opacity } = useAfterInteractions();
//         const LoadingComponent = () => <SafeAreaView><Box flex={1}>{<Spinner color={'blue.500'} />}</Box></SafeAreaView>;
//         console.log('interactionsComplete', interactionsComplete);
//         return (
//             <Animated.View
//                 ref={transitionRef}
//                 style={{
//                     flex: 1,
//                     opacity: opacity.value,
//                     transform: [{ scale: opacity.value }],
//                   }}
//             >
//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
//             </Animated.View>
//         );
//     };

//     hoistNonReactStatics(Wrapped, Component);
//     return Wrapped;
// }

// export function withInteractionsManaged<Props>(
//     Component: ComponentType<Props>,
//     Placeholder: ComponentType | null = null,
// ) {
//     const Wrapped = (props: Props) => {
//         const { transitionRef, interactionsComplete } = useAfterInteractions();
//         const LoadingComponent = () => <Box flex={1}>{<Spinner color={'blue.500'} />}</Box>;
//         console.log('interactionsComplete', interactionsComplete);
//         return (
//             <Transitioning.View
//                 transition={
//                     <Transition.Together>
//                         <Transition.Change interpolation="easeInOut" />
//                         <Transition.In type="fade" />
//                     </Transition.Together>
//                 }
//                 style={{ flex: 1 }}
//                 ref={transitionRef}
//             >
//                 {interactionsComplete ? <Component {...props} /> : Placeholder ? <Placeholder /> : <LoadingComponent />}
//             </Transitioning.View>
//         );
//     };

//     hoistNonReactStatics(Wrapped, Component);
//     return Wrapped;
// }