import React, { Component, PureComponent } from 'react';
import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Image, Dimensions, Button, Linking } from 'react-native';
// import { Button } from 'react-native-vector-icons/FontAwesome';
import { getStatusBarHeight } from '../helper';
import { connect } from 'react-redux';
import actions from '../Actions/actions';
import { Portal } from '../Api/types';
import { bindActionCreators } from 'redux';
import { COLORS_FRACTION, RESO_NRG, COLORS_LVL, COLORS_MOD, MOD_TYPE, NavTo } from '../constants';

type Props = {
    guid: string
    portal?: Portal
}

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

class PortalPanel extends PureComponent<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Информация о портале',
        };
    };
    componentDidMount() {
        this.props.getPortalDetails(this.props.guid)
    }
    componentWillReceiveProps(next: Props) {
        if (next.guid != this.props.guid) {
            this.props.getPortalDetails(next.guid)
        }
    }
    render() {
        const { portal } = this.props
        if (!portal) {
            return <ActivityIndicator />
        }
        return (
            <View style={styles.overlay}>
                <View style={styles.panelRow}>
                    <Image style={styles.photo} source={{ uri: portal.photo }} />
                    <View style={styles.panelRight}>
                        <Text style={[styles.title, { color: COLORS_FRACTION[portal.fraction] }]}>{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}>Дата: {portal.timestamp && (new Date(portal.timestamp)).toLocaleString()}</Text>
                        <Text style={styles.subtitle}>Адрес: {portal.address || 'загрузка...'}</Text>
                    </View>
                </View>
                <Text style={styles.title}>Резонаторы</Text>
                <View>
                    {portal.resonators && portal.resonators.map((r, idx) =>
                        r ?
                            (<Text key={idx} style={[styles.subtitle, { color: COLORS_LVL[r[1]] }]}>{idx + 1}: {r[1]} [{r[2]}/{RESO_NRG[r[1]]}] - {r[0]}</Text>) :
                            (<Text key={idx} style={styles.subtitle}>{idx + 1}: нет</Text>)
                    )}
                    {(!portal.resonators || portal.resonators.length == 0) && (<Text style={styles.subtitle}>нет</Text>)}
                </View>
                <Text style={styles.title}>Моды</Text>
                <View>
                    {portal.mods && portal.mods.map((r, idx) =>
                        r ?
                            (<Text key={idx} style={[styles.subtitle, { color: COLORS_MOD[r[2]] }]}>{idx + 1}: {MOD_TYPE[r[1]] || r[1]} [{r[2]}] - {r[0]}</Text>) :
                            (<Text key={idx} style={styles.subtitle}>{idx + 1}: нет</Text>)
                    )}
                </View>
                <Text style={styles.title}>Навигация к порталу</Text>
                <View>
                    <Button onPress={() => Linking.openURL(NavTo(portal.coords.latitude, portal.coords.longitude, portal.name, 'ymaps'))} title={'Яндекс Навигатор'} />
                    <Button onPress={() => Linking.openURL(NavTo(portal.coords.latitude, portal.coords.longitude, portal.name, 'maps.me'))} title={'Maps.me'} />
                    <Button onPress={() => Linking.openURL(NavTo(portal.coords.latitude, portal.coords.longitude, portal.name, '2gis'))} title={'2ГИС'} />
                    <Button onPress={() => Linking.openURL(NavTo(portal.coords.latitude, portal.coords.longitude, portal.name, 'default'))} title={'Другие карты/навигаторы'} />
                </View>
            </View>
        );
    }
}

export default connect((store, props: Props) => {
    const guid = props.navigation.getParam('guid')
    return {
        portal: store.entities.portals[guid],
        guid
    }
}, (dispatch) => bindActionCreators(actions, dispatch))(PortalPanel)

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        padding: 8,
    },
    panelRow: {
        flexDirection: 'row',
    },
    panelRight: {
        paddingLeft: 8,
        width: width - 116
    },
    title: {
        fontWeight: 'bold',
        fontSize: 22,
    },
    subtitle: {
        fontWeight: 'normal',
        fontSize: 18,
    },
    user: {
        fontWeight: 'bold',
    },
    photo: {
        width: 100,
        height: 195,
    }
});