import React, {useState, useEffect} from 'react';
import MapView, {Marker, Polygon, AnimatedRegion} from 'react-native-maps';
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
import screen from '../constants/layout';
import {useDispatch, useSelector} from "react-redux";
import {useNavigation} from "@react-navigation/native";
import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
import {SET_OPTROUTE_REQUEST} from "../reducers/location";
import styled from "styled-components";
import OptRoutePath from "./OptRoutePath";

const GoToOptRoutePath = styled.TouchableOpacity`
    flex: 2;
    position: absolute;
    right: 8px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
`;

const Maps = (props) => {
    const navigation = useNavigation();
    const [region, setRegion] = useState(null);
    const [markers, setMarkers] = useState([]);
    const [pathList, setPathList] = useState([]);
    const {startLocation, endLocation, optRoute, endTime, personalVelocity} = useSelector(state => state.location);
    const onRegionChange = (region) => {
        setRegion(region);
    };

    useEffect(() => {
        setRegion({
            latitude: 37.56647,
            longitude: 126.977963,
            latitudeDelta: 1.5,
            longitudeDelta: 1.5
        });
        if (startLocation || endLocation) {
            setMarkers([startLocation, endLocation]);
        }

    }, []);

    const dispatch = useDispatch();
    const goToOptRoutePath = async () => {
        try {
            console.log('set optroute request');
            await dispatch({
                type: SET_OPTROUTE_REQUEST,
                data: {
                    startLocation,
                    endLocation,
                    endTime,
                    personalVelocity
                }
            });
            setTimeout(() => {
                if (optRoute !== null) {
                    navigation.navigate('OptRoutePath', {optRoute: optRoute})
                }
            }, 3000);
        } catch (e) {
            console.error(e);
        }
    };

    useEffect(() => {
        setMarkers([startLocation, endLocation]);
    }, [startLocation, endLocation]);


    return (
        <View style={styles.container}>
            <View style={styles.input}>
                <MaterialCommunityIcons color={'red'} name={'map-marker'} size={26}/>
                <TextInput
                    style={styles.inputText}
                    value={startLocation.title}
                />
            </View>
            <View style={styles.input}>
                <MaterialCommunityIcons color={'blue'} name={'map-marker'} size={26}/>
                <TextInput
                    style={styles.inputText}
                    value={endLocation.title}
                />
            </View>
            <MapView
                style={styles.mapStyle}
                initialRegion={region}
                onRegionChange={onRegionChange}
                textStyle={{color: '#bc8b00'}}
                showsUserLocation={true}
            >
                {markers ?
                    markers.map((marker, index) => {
                        return (
                            <MapView.Marker draggable
                                            key={index}
                                            coordinate={marker}
                                            title={marker.title}
                            />
                        )
                    })
                    :
                    null
                }
            </MapView>
            <GoToOptRoutePath onPress={goToOptRoutePath}>
                <AntDesign color={'darkgrey'} name={'caretright'} size={32}/>
            </GoToOptRoutePath>
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    mapStyle: {
        width: screen.width,
        height: screen.height,
    },
    textStyle: {
        flex: 1,
        fontWeight: 'bold',
        fontSize: 20,
        color: 'grey',
        marginBottom: 20,
    },
    input: {
        borderRadius: 10,
        backgroundColor: '#f0f8ff',
        paddingLeft: 10,
        paddingTop: 5,
        paddingRight: 10,
        width: 350,
        height: 30,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomColor: '#f0f8ff',
        marginBottom: 10
        // borderBottomWidth: StyleSheet.hairlineWidth,
    },
    inputText: {
        flex: 1,
    },
});

export default Maps;