import React from 'react';
import { Lifecycle } from '../containers/layout/Lifecycle';
import { LifecyclePhase } from '@workbench-stack/core';
import Animated from 'react-native-reanimated';
import { useAfterInteractions } from '../hooks/use-after-interactions';
import { Spinner, Center } from '@gluestack-ui/themed';
import { Platform } from 'react-native';
import { WithPermissionContainer } from './WithPermission';
import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';

const LoadingComponent = () => (
    <Center flex={1} justifyContent={'center'} alignItems={'center'}>
        {<Spinner color={'$blue500'} />}
    </Center>
);

const LifecycleComponent = ({ children }: { children?: any }) => {
    const { authenticated } = isUserAuthenticated();
    if (authenticated) {
        return (
            <Lifecycle renderWhenPhase={LifecyclePhase.Restored} loadingRenderer={LoadingComponent}>
                {children}
            </Lifecycle>
        );
    } else {
        return <>{children}</>;
    }
};

const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
    const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
    React.useEffect(() => {
        if (interationTime) setInteractionsTimeOut(interationTime);
    }, [interationTime]);
    return (
        <>
            {interactionsComplete ? (
                children
            ) : (
                <Animated.View
                    style={{
                        flex: 1,
                        opacity: opacity.value,
                        transform: [{ scale: opacity.value }],
                    }}
                >
                    <LoadingComponent />
                </Animated.View>
            )}
        </>
    );
};

const IntractionWithLifeCycleComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
    const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
    React.useEffect(() => {
        if (interationTime) setInteractionsTimeOut(interationTime);
    }, [interationTime]);
    return (
        <>
            {interactionsComplete ? (
                <LifecycleComponent>{children}</LifecycleComponent>
            ) : (
                <Animated.View
                    style={{
                        flex: 1,
                        opacity: opacity.value,
                        transform: [{ scale: opacity.value }],
                    }}
                >
                    <LoadingComponent />
                </Animated.View>
            )}
        </>
    );
};

export function withInteractionsManaged(component: any, interationTime?: number, permissionKeys = null) {
    return (
        <>
            {Platform.OS === 'ios' ? (
                <>
                    <>{component}</>
                    {/* {permissionKeys ? (
                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                    ) : (
                        <>{component}</>
                    )} */}
                </>
            ) : (
                <IntractionComponent interationTime={interationTime}>
                    <>{component}</>
                    {/* {permissionKeys ? (
                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                    ) : (
                        <>{component}</>
                    )} */}
                </IntractionComponent>
            )}
        </>
    );
}

export function withLifeCycleInteractionsManaged(component: any, interationTime?: number, permissionKeys = null) {
    return (
        <>
            {Platform.OS === 'ios' ? (
                <LifecycleComponent>
                    <>{component}</>
                    {/* {permissionKeys ? (
                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                    ) : (
                        <>{component}</>
                    )} */}
                </LifecycleComponent>
            ) : (
                <IntractionWithLifeCycleComponent interationTime={interationTime}>
                    <>{component}</>
                    {/* {permissionKeys ? (
                        <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                    ) : (
                        <>{component}</>
                    )} */}
                </IntractionWithLifeCycleComponent>
            )}
        </>
    );
}

export function withLifeCycleManaged(component: any, permissionKeys = null) {
    return (
        <LifecycleComponent>
            <>{component}</>
            {/* {permissionKeys ? (
                <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
            ) : (
                <>{component}</>
            )} */}
        </LifecycleComponent>
    );
}