import React, {Component} from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    View,
    Dimensions,
    Text,
    PermissionsAndroid,
    ScrollView,
    Modal,
    ImageBackground
} from "react-native";
import MapView, {Marker} from "react-native-maps";
import MapViewDirections from 'react-native-maps-directions';
import {getPixelSize} from "../utils";
import {createIconSetFromFontello} from 'react-native-vector-icons';
import fontelloConfig from '../../../config.json';
import {Button, Picker, Item, Icon} from "native-base";
import FetchLocation from "./FetchLocation";
import Loader from "../Loading/Loader";

import {connect} from "react-redux";
import * as actions from "../../store/actions";

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const Icons = createIconSetFromFontello(fontelloConfig);

class MapTrack extends Component {

    state = {
        isLoading: true,
        region: null,
        infoLocais: false,
        mode: "walking",
        showFilters: false,
    };

    async requestGPSPermission() {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                {
                    title: 'iLoveAveiro Permissão GPS',
                    message: 'iLoveAveiro pretende aceder à sua localização',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'Ok',
                },
            );

            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log("SUCCESS");
                this.setState({
                    hasGPSPermission: true,
                });
                if (this.state.hasGPSPermission) {
                    navigator.geolocation.getCurrentPosition(
                        position => {
                            this.mapView.animateToRegion({
                                latitude: position.coords.latitude,
                                longitude: position.coords.longitude,
                                latitudeDelta: 0.0222,
                                longitudeDelta: 0.0121,
                            });
                            console.log(position);
                        },
                        (error) => {
                            console.log("this.state.hasGPS: ", this.state.hasGPSPermission);
                            console.log("erro da posição: ", error)
                        },
                        {enableHighAccuracy: false}
                    );
                }
            } else {
                console.log("ASNEIRA");
            }
        } catch (e) {
            console.warn("erro: ", e)
        }
    }

    _setIsLoading = (boolean = false) => {
        this.setState(
            {
                isLoading: boolean
            }
        )
    };

    componentDidMount() {
        const {navigation} = this.props;
        const id = navigation.getParam('id', 'undefined');
        this.props.getTrackPlaces(this._setIsLoading, id);
        this.requestGPSPermission();
    }

    getWaypoints = (data) => {
        console.log("data = ", data);
        let content = [];
        if (data.length > 2) {
            let wayp = data.slice(1, -1);
            wayp.map(marker => {
                console.log("marker = ", marker);
                content = [
                    ...content,
                    {
                        latitude: marker.latitude,
                        longitude: marker.longitude
                    }
                ]
            })
        }
        return content;
    };

    center = () => {
        this.requestGPSPermission();
    };

    render() {
        let data = this.props.places;
        const {region} = this.state;

        return (
            !this.state.isLoading ? (
                <View style={{flex: 1}}>
                    <MapView
                        style={styles.map}
                        showsUserLocation={true}
                        showsMyLocationButton={false}
                        region={region}
                        initialRegion={{
                            latitude: data[0].latitude,
                            longitude: data[0].longitude,
                            latitudeDelta: 0.0922,
                            longitudeDelta: 0.0421,
                        }}
                        ref={el => (this.mapView = el)}
                    >
                        {data.map((coord, index) => {
                            return (
                                <Marker key={`coord_${index}`} coordinate={coord} title={String(coord.name)}/>)
                        })}

                        {(data.length >= 2) ? (

                            <MapViewDirections
                                origin={data[0]}
                                waypoints={this.getWaypoints(data)}
                                destination={data[data.length - 1]}
                                apikey="xxxxxx"
                                strokeWidth={3}
                                mode={this.state.mode}
                                strokeColor="orange"
                                optimizeWaypoints={true}
                                onStart={(params) => {
                                    console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
                                }}
                                onReady={result => {
                                    console.log(`Distance: ${result.distance} km`);
                                    console.log(`Duration: ${result.duration} min.`);
                                    this.mapView.fitToCoordinates(result.coordinates, {
                                        edgePadding: {
                                            right: getPixelSize(50),
                                            left: getPixelSize(50),
                                            top: getPixelSize(50),
                                            bottom: getPixelSize(50),
                                        }
                                    });
                                }}
                                onError={(errorMessage) => {
                                    console.log(errorMessage);
                                }}
                            />
                        ) : console.log("nao entrou")}
                    </MapView>

                    <FetchLocation onGetLocation={this.center}/>

                    <Modal transparent closeOnClick={true}
                           animationType="slide"
                           onRequestClose={() => {
                               this.setState({showFiltersMap: false})
                           }}
                           visible={this.state.showFilters}>
                        <View style={styles.ModalView}>
                            <Text style={{alignSelf: 'center', marginTop: 20, fontWeight: 'bold'}}>Meios de
                                Transporte</Text>
                            <View style={{
                                flex: 1, flexDirection: 'row', marginTop: 20, justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <View style={{marginRight: 30}}>
                                    <Button rounded light onPress={() => {
                                        console.log("bike");
                                        this.setState({
                                            mode: "bicycling",
                                        });
                                    }} style={this.state.mode === "bicycling" ? {
                                        backgroundColor: '#FFCB64',
                                        alignSelf: 'center'
                                    } : {alignSelf: 'center'}}>
                                        <Icons name="bike" size={40}/>
                                    </Button>
                                    <Text style={{position: 'relative', top: 5, alignSelf: 'center'}}>Bicicleta</Text>
                                </View>
                                <View style={{marginRight: 30}}>
                                    <Button rounded light onPress={() => {
                                        this.setState({
                                            mode: "walking",
                                        })
                                    }} style={this.state.mode === "walking" ? {
                                        backgroundColor: '#FFCB64',
                                        alignSelf: 'center'
                                    } : {alignSelf: 'center'}}>
                                        <Icons name="walk" size={40}/>
                                    </Button>
                                    <Text style={{alignSelf: 'center', position: 'relative', top: 5}}>Caminhar</Text>
                                </View>
                                <View>
                                    <Button rounded light onPress={() => {
                                        this.setState({
                                            mode: "driving",
                                        })
                                    }} style={this.state.mode === "driving" ? {
                                        backgroundColor: '#FFCB64',
                                        alignSelf: 'center'
                                    } : {alignSelf: 'center'}}>
                                        <Icons name="car" size={40}/>
                                    </Button>
                                    <Text style={{alignSelf: 'center', position: 'relative', top: 5}}>Carro</Text>
                                </View>
                            </View>
                            <View style={{flex: 1}}>
                                <TouchableOpacity style={{position: 'relative', top: 20,}} onPress={() => {
                                    this.setState({
                                        showFilters: false
                                    })
                                }
                                }>
                                    <Text style={{color: '#FFCB64'}}>Fechar</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </Modal>

                    {this.state.infoLocais &&
                    <ScrollView style={styles.placesContainer} horizontal showsHorizontalScrollIndicator={false}
                                pagingEnabled onMomentumScrollEnd={e => {
                        const scrolled = e.nativeEvent.contentOffset.x;
                        const place = (scrolled > 0) ? scrolled / Dimensions.get('window').width : 0;

                        const {latitude, longitude} = data[place];
                        this.mapView.animateToRegion({
                            latitude,
                            longitude,
                            latitudeDelta: 0.0122,
                            longitudeDelta: 0.0121,
                        });

                    }}>
                        {data.map(place => (
                            <View key={place.name} style={styles.place}>
                                <ImageBackground imageStyle={{borderRadius: 20}} style={{width: '100%', height: 200}}
                                source={{uri: 'https://turismodocentro.pt/wp-content/uploads/2017/03/ria-aveiro_1920x1080.jpg'}}>
                                <View style={{
                                    flexDirection: 'column',
                                    width: '100%',
                                    flex: 1,
                                    backgroundColor: 'rgba(0,0,0,0.5)',
                                    borderRadius: 20
                                }}>
                                    <View style={{marginBottom: 30}}>
                                        <Text style={{
                                            paddingTop: 10,
                                            paddingLeft: 10,
                                            color: 'white',
                                            fontWeight: 'bold'
                                        }}>CULTURA</Text>
                                    </View>
                                    <View>
                                        <Text style={{
                                            fontSize: 25,
                                            color: 'white',
                                            paddingLeft: 10,
                                        }}>{place.name}</Text>
                                    </View>
                                    <Text></Text>
                                    <Text></Text>
                                    <View style={{
                                        width: 50,
                                        height: 50,
                                        alignSelf: 'flex-end',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        borderRadius: 5,
                                        marginRight: 10
                                    }}>

                                        <Icon name="info" style={{paddingTop: 5, color: 'white'}}
                                              type="SimpleLineIcons"/>
                                        <Text style={{
                                            fontWeight: 'bold',
                                            paddingBottom: 2,
                                            color: 'white'
                                        }}>INFO</Text>
                                    </View>
                                </View>
                                </ImageBackground>
                            </View>
                        ))
                        }
                    </ScrollView>
                    }

                    <View style={styles.bottom}>
                        <View style={styles.bottomViews}>
                            <TouchableOpacity onPress={() => {
                                this.props.navigation.navigate('Home')
                            }}>
                                <Icons style={styles.icon} name="home" size={60}/>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.bottomViews}>
                            <Icons style={styles.icon} name="qr" size={60}/>
                        </View>
                        <View style={styles.bottomViews}>
                            <TouchableOpacity onPress={() => this.setState({showFilters: true, infoLocais: false,})}>
                                <Icons style={styles.icon} name="filtros" size={60}/>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.bottomViews}>
                            {this.state.infoLocais ?
                                <TouchableOpacity onPress={() => this.setState({infoLocais: false})}>
                                    <Icons style={styles.icon} name="trajetos" size={40}/>
                                </TouchableOpacity> :
                                <TouchableOpacity onPress={() => this.setState({infoLocais: true, filtro: false})}>
                                    <Icons style={styles.icon} name="trajetos" size={40}/>
                                </TouchableOpacity>
                            }
                        </View>
                    </View>
                </View>
            ) : (
                <Loader/>
            )
        )
    }
}

const styles = StyleSheet.create({
    map: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'center',
        position: 'absolute',
    },
    bottom: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'white',
        position: 'absolute',
        bottom: 0,
        width: "100%",
        borderTopLeftRadius: 100,
        borderTopRightRadius: 100,
    },
    bottomViews: {
        justifyContent: 'center',
        alignItems: 'center',
        width: (width / 4),
    },
    icon: {
        color: '#C4C4C4',
    },
    placesContainer: {
        width: '100%',
        height: 200,
        position: 'absolute',
        top: (height * 0.6),
    },
    place: {
        width: width - 40,
        maxHeight: 200,
        backgroundColor: '#FFF',
        marginHorizontal: 20,
        borderRadius: 20,
    },
    ModalView: {
        backgroundColor: 'white',
        height: height * 0.33,
        width: width * 0.8,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: width * 0.1,
        marginTop: height * 0.33,
        borderRadius: 40,
        flexDirection: 'column',
    },
});

function mapStateToProps(state) {
    return {
        places: state.trackPlaces.placesSuccess
    };
}

export default connect(
    mapStateToProps,
    actions
)(MapTrack);