import React from 'react';
import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking, TextInput, Slider, Image, Dimensions } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { getStatusBarHeight, getBottomSpace } from '../helper';
import { LatLng } from '../Api/interfaces';
import { COLORS_FRACTION, COLORS_LVL, RESO_NRG } from '../constants';

const { width, height } = Dimensions.get("screen")

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

export default class extends React.Component<Props> {
    componentWillReceiveProps(next) {
        if (this.props.selectedPortal !== next.selectedPortal && next.selectedPortal && next.selectedPortal.guid) {
            this.props.getPortalDetails(next.selectedPortal.guid)
        }
    }
    render() {
        const props = this.props
        const portal = this.props.portal
        return (
            <>
                <View style={styles.overlayLeft}>
                    {props.loading > 0 ? (
                        <View style={styles.loader}>
                            <ActivityIndicator color={"#000"} />
                        </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={"#fff"}
                        />
                    </View>
                    <View style={styles.buttonWrapper}>
                        <FontAwesome.Button
                            style={styles.button}
                            name={'refresh'}
                            onPress={props.refresh}
                            iconStyle={styles.icon}
                            color={"#000"}
                            size={25}
                            backgroundColor={"#fff"}
                        />
                    </View>
                </View>
                {props.selectedPortal ? (
                    <View style={styles.panel} tint={'default'} intensity={90}>
                        <Image style={styles.photo} source={{ uri: portal.photo }} />
                        <View style={styles.column}>
                            <Text style={[styles.title, { color: COLORS_FRACTION[portal.fraction] }]} ellipsizeMode={'tail'} numberOfLines={1}>{portal.name}</Text>
                            <Text style={styles.subtitle}>Уровeнь: {portal.level}, здоровье: {portal.power}</Text>
                            <Text style={styles.subtitle}>Владелец: <Text style={[styles.user, { color: COLORS_FRACTION[portal.fraction] }]}>{portal.owner || 'нет'}</Text></Text>
                            <Text style={styles.subtitle}>Резонаторы:</Text>
                            <Text style={styles.subtitle}>
                                {portal.resonators && portal
                                    .resonators
                                    .filter(r => !!r)
                                    .map((r, idx) => (<Text key={idx} style={[styles.subtitle, { color: COLORS_LVL[r[1]] }]}>[{r[1]}]</Text>))}
                            </Text>
                        </View>
                        {/* <FontAwesome.Button
                            style={styles.panelButton}
                            name={'star-o'}
                            onPress={() => {
                                props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
                            }}
                            iconStyle={styles.icon}
                            color={"#000"}
                            size={32}
                            backgroundColor={"transparent"}
                        /> */}
                        <FontAwesome.Button
                            style={styles.panelButton}
                            name={'angle-right'}
                            onPress={() => {
                                props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
                            }}
                            iconStyle={styles.icon}
                            color={"#000"}
                            size={32}
                            backgroundColor={"transparent"}
                        />
                    </View>
                ) : null}
            </>
        );
    }
}
const styles = StyleSheet.create({
    overlayLeft: {
        position: 'absolute',
        top: getStatusBarHeight() + 20,
        left: 8,
    },
    overlayRight: {
        position: 'absolute',
        top: getStatusBarHeight() + 20,
        right: 8,
    },
    button: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 48,
        width: 48,
    },
    panelButton: {
        justifyContent: 'center',
        alignItems: 'center',
        height: 100,
        width: 64,
    },
    buttonWrapper: {
        margin: 8,
        //ios    
        shadowOpacity: 0.3,
        shadowRadius: 3,
        shadowOffset: {
            height: 0,
            width: 0
        },
        //android
        elevation: 1
    },
    panel: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        overflow: 'hidden',
        borderTopWidth: StyleSheet.hairlineWidth,
        borderTopColor: '#000',
        padding: 0,
        height: 100,
        //ios    
        shadowOpacity: 0.6,
        shadowRadius: 6,
        shadowOffset: {
            height: 0,
            width: 0
        },
        //android
        elevation: 1
    },
    column: {
        flexGrow: 1,
        padding: 8,
        width: (width - 124)
    },
    icon: {
        marginRight: 0,
    },
    loader: {
        margin: 8,
        paddingHorizontal: 8,
    },
    title: {
        fontWeight: 'bold',
    },
    subtitle: {
        fontWeight: 'normal',
    },
    user: {
        fontWeight: 'bold',
    },
    photo: {
        width: 55,
        height: 100,
    }
});