import React from 'react';
import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { getStatusBarHeight } 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.overlay}>
        <View style={styles.button}>
            <FontAwesome.Button
                name={'crosshairs'}
                onPress={props.goToMe}
                iconStyle={styles.icon}
                color={"#000"}
                size={24}
                backgroundColor={"#e3e3e3"}
            />
        </View>
        <View style={styles.button}>
            <FontAwesome.Button
                name={'refresh'}
                onPress={props.refresh}
                iconStyle={styles.icon}
                color={"#000"}
                size={24}
                backgroundColor={"#e3e3e3"}
            />
        </View>
        {props.selectedPortal ? (
            <>
                <View style={styles.button}>
                    <FontAwesome.Button
                        name={'info'}
                        onPress={() => {
                            props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
                        }}
                        iconStyle={styles.icon}
                        color={"#000"}
                        size={24}
                        backgroundColor={"#e3e3e3"}
                    />
                </View>
                <View style={styles.button}>
                    <FontAwesome.Button
                        name={'location-arrow'}
                        onPress={() => Linking.openURL(`geo:${props.selectedPortal.coords.latitude},${props.selectedPortal.coords.longitude}`)}
                        iconStyle={styles.icon}
                        color={"#000"}
                        size={24}
                        backgroundColor={"#e3e3e3"}
                    />
                </View>
            </>
        ) : null}

        <View style={styles.button}>
            <Text>{props.loading}</Text>
        </View>
        {props.loading > 0 ? (
            <View style={styles.loader}>
                <ActivityIndicator color={"#000"} />
            </View>
        ) : null}
    </View>
);

const styles = StyleSheet.create({
    overlay: {
        position: 'absolute',
        top: 8 + getStatusBarHeight(true),
        right: 8,
    },
    button: {
        margin: 8,
    },
    icon: {
        marginRight: 0,
    },
    loader: {
        margin: 8,
        paddingHorizontal: 8,
    }
});