var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React, { useCallback, useState, useEffect } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, ImageBackground, } from 'react-native';
import GlobeView from './components/Globe/GlobeView';
import ThankYouCardsCarousel from './components/Carousel/Carousel';
import './modules/gesture';
const GlobeRender = (props) => {
    const defaultLocation = [
        {
            id: 'L00',
            title: 'Detroit',
            coordinates: {
                lng: -83,
                lat: 42,
            },
        },
    ];
    const [isSceneVisible, setSceneVisibility] = useState(false);
    const [isGlobeVisible, setVisibility] = useState(false);
    const [showBeams, setBeamVisibility] = useState(false);
    const [locations, setLocations] = useState(defaultLocation);
    const [isMessageVisible, setIsMessageVisible] = useState(false);
    const fetchClientDataPoints = (clientId) => __awaiter(void 0, void 0, void 0, function* () {
        yield fetch(`https://hc.rebuild.digital/api/client/datapoints/${clientId}`, {
            method: 'GET',
        })
            .then((response) => __awaiter(void 0, void 0, void 0, function* () {
            const info = yield response.json();
            if (info.status !== 200) {
                const error = (info && info.message) || response.statusText;
                return error;
            }
            setLocations(info.data.dataPoints);
        }))
            .catch(error => {
            console.error('There was an error fetching data points from admin!', error);
        });
    });
    /*
      For dev purpose
    */
    const onRevealGlobe = useCallback(() => {
        // const maxArcs = Math.floor((data.length - 2) * Math.random()) + 2;
        // const randomLocations = getRandom(data, maxArcs);
        // setLocations(randomLocations);
        setVisibility(true);
        setTimeout(() => {
            setBeamVisibility(true);
            setIsMessageVisible(true);
        }, 1500);
    }, []);
    const onToggleMessages = () => {
        setIsMessageVisible(!isMessageVisible);
    };
    const onCloseGlobeScreen = () => {
        setBeamVisibility(false);
        setIsMessageVisible(false);
        setVisibility(false);
        setTimeout(() => setSceneVisibility(false), 2000);
        setTimeout(() => console.log('Change App Screen'), 2500);
        props.exit();
    };
    useEffect(() => {
        if (props.manualDataPoints) {
            setLocations(props.manualDataPoints);
        }
        if (props.clientId && !props.manualDataPoints) {
            fetchClientDataPoints(props.clientId);
        }
        setSceneVisibility(true);
        if (isGlobeVisible === false) {
            setTimeout(onRevealGlobe, 500);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props]);
    return (React.createElement(View, { style: styles.viewWrap },
        React.createElement(ImageBackground, { style: [
                styles.backgroundImage,
                isSceneVisible ? styles.showBackgroundImage : null,
            ], source: require('./assets/images/space-bg.webp') },
            React.createElement(GlobeView, { currentLocation: props.currentLocation, locations: locations, isVisible: isGlobeVisible, showBeams: showBeams, type: props.type, theme: props.theme }),
            props.messages && isMessageVisible && (React.createElement(ThankYouCardsCarousel, { toggleView: onToggleMessages, isVisible: isMessageVisible, user: props.currentUser, slideData: props.messages })),
            React.createElement(View, { style: styles.btnView },
                !isMessageVisible && (React.createElement(TouchableOpacity, { onPress: onToggleMessages, style: styles.btnWrapper },
                    React.createElement(View, { style: styles.btn },
                        React.createElement(Text, { style: styles.btnLabel }, "Read Thank You Messages")))),
                React.createElement(TouchableOpacity, { onPress: onCloseGlobeScreen, style: styles.btnWrapper },
                    React.createElement(View, { style: styles.btn },
                        React.createElement(Text, { style: styles.btnLabel }, "Back To App")))))));
};
const styles = StyleSheet.create({
    viewWrap: {
        width: '100%',
        height: '100%',
        backgroundColor: '#000000',
    },
    backgroundImage: {
        height: '100%',
        backgroundColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 2,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        opacity: 0,
        transitionProperty: 'all',
        transitionDuration: '1s',
        transitionTimingFunction: 'ease-in-out',
    },
    showBackgroundImage: {
        opacity: 1,
        transitionProperty: 'all',
        transitionDuration: '1s',
        transitionTimingFunction: 'ease-in-out',
    },
    btnView: {
        position: 'absolute',
        bottom: 0,
        zIndex: 999,
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
    },
    btnWrapper: {
        alignSelf: 'center',
        height: 'auto',
    },
    btn: {
        marginBottom: 20,
        height: 40,
        paddingHorizontal: 20,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4d94ff',
        borderRadius: 999,
    },
    btnLabel: {
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
    },
});
export default GlobeRender;
