import React from 'react';
import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { getStatusBarHeight, getBottomSpace } from '../helper';
import { LatLng } from '../Api/interfaces';

type Props = {
    goToMe: (e: GestureResponderEvent) => void;
    refresh: (e: GestureResponderEvent) => void;
    onOpenPortal: (guid: string, coords: LatLng) => void;
    loading: Number;
    selectedPortal: any;
}

export default (props: Props) => (
    <>
        <View style={styles.overlayLeft}>
            {props.loading > 0 ? (
                <View style={styles.loader}>
                    <ActivityIndicator color={"#000"} />
                </View>
            ) : null}
            {props.selectedPortal ? (
                <>
                    <View style={styles.buttonWrapper}>
                        <FontAwesome.Button
                            style={styles.button}
                            name={'info'}
                            onPress={() => {
                                props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
                            }}
                            iconStyle={styles.icon}
                            color={"#000"}
                            size={25}
                            backgroundColor={"#e3e3e3"}
                        />
                    </View>
                    <View style={styles.buttonWrapper}>
                        <FontAwesome.Button
                            style={styles.button}
                            name={'location-arrow'}
                            onPress={() => Linking.openURL(`geo:${props.selectedPortal.coords.latitude},${props.selectedPortal.coords.longitude}`)}
                            iconStyle={styles.icon}
                            color={"#000"}
                            size={25}
                            backgroundColor={"#e3e3e3"}
                        />
                    </View>
                </>
            ) : null}
        </View>

        <View style={styles.overlayRight}>
            <View style={styles.buttonWrapper}>
                <FontAwesome.Button
                    style={styles.button}
                    name={'crosshairs'}
                    onPress={props.goToMe}
                    iconStyle={styles.icon}
                    color={"#000"}
                    size={25}
                    backgroundColor={"#e3e3e3"}
                />
            </View>
            <View style={styles.buttonWrapper}>
                <FontAwesome.Button
                    style={styles.button}
                    name={'refresh'}
                    onPress={props.refresh}
                    iconStyle={styles.icon}
                    color={"#000"}
                    size={25}
                    backgroundColor={"#e3e3e3"}
                />
            </View>
        </View>
    </>
);

const styles = StyleSheet.create({
    overlayLeft: {
        position: 'absolute',
        bottom: getBottomSpace(),
        left: 8,
    },
    overlayRight: {
        position: 'absolute',
        bottom: getBottomSpace(),
        right: 8,
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 48,
        width: 48,
    },
    buttonWrapper: {
        margin: 8,
    },
    icon: {
        marginRight: 0,
    },
    loader: {
        margin: 8,
        paddingHorizontal: 8,
    }
});