import React, {useState, useEffect} from 'react';
import MapView, {Marker} from 'react-native-maps';
import {StyleSheet, Text, TextInput, View, TouchableOpacity, Alert} from 'react-native';
import screen from '../constants/layout';
import {useSelector, useDispatch} from "react-redux";
import * as Location from 'expo-location';
import {set} from "react-native-reanimated";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import {SET_ELOC_REQUEST, SET_LOC_REQUEST, SET_SLOC_REQUEST, SET_USER_LOC} from "../reducers/location";
import axios from 'axios';

const StartAndFinishLocationComponent = () => {
    const [hasPermission, setHasPermission] = useState(false);
    const [startTextLocation, setStartTextLocation] = useState('');
    const [endTextLocation, setEndTextLocation] = useState('');
    const [userLocation, setUserLocation] = useState(null);
    const [errorMsg, setErrorMsg] = useState(null);

    const onChangeStartLocation = (startTextLocation) => {
        setStartTextLocation(startTextLocation);
    };

    const onChangeFinishLocation = (endTextLocation) => {
        setEndTextLocation(endTextLocation);
    };

    const dispatch = useDispatch();
    const onSetUserLocation = async () => {
        const {status} = await Location.requestPermissionsAsync();
        if (status !== 'granted') {
            setErrorMsg('Permission to access location was denied')
        }
        const location = await Location.getCurrentPositionAsync({});
        setStartTextLocation('현위치');
        setUserLocation(location);
        console.log(location);
        await dispatch({
            type: SET_USER_LOC,
            data: {
                userLocation
            }
        });
    };

    const setLocation = async () => {
        if (startTextLocation && startTextLocation !== '현위치') {
            console.log(startTextLocation);
            await dispatch({
                type: SET_SLOC_REQUEST,
                data: {
                    startTextLocation
                }
            })
        }

        if (endTextLocation) {
            console.log(endTextLocation);
            await dispatch({
                    type: SET_ELOC_REQUEST,
                    data: {
                        endTextLocation
                    }
                }
            )
        }

        Alert.alert(
            'MAP ROUTE 설정',
            ` 출발지 ${startTextLocation}, 목적지 ${endTextLocation} 맞습니까? `,
            [
                {
                    text: 'Cancel',
                    onPress: () => console.log('Cancel Pressed'),
                    style: 'cancel',
                },
                {text: 'OK', onPress: () => console.log('OK Pressed')},
            ],
            {cancelable: false}
        );
    };


    return (
        <View style={styles.container}>
            <View style={styles.input}>
                <MaterialCommunityIcons color={'red'} name={'map-marker'} size={26}/>
                <TextInput
                    style={styles.inputText}
                    onChangeText={onChangeStartLocation}
                    value={startTextLocation}
                />
                <TouchableOpacity onPress={onSetUserLocation}>
                    <MaterialCommunityIcons color={'grey'} name={'crosshairs-gps'} size={30}/>
                </TouchableOpacity>

            </View>
            <View style={styles.input}>
                <MaterialCommunityIcons color={'blue'} name={'map-marker'} size={26}/>
                <TextInput
                    style={styles.inputText}
                    onChangeText={onChangeFinishLocation}
                    value={endTextLocation}
                />
            </View>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <TouchableOpacity style={styles.buttonStyle} onPress={setLocation}>
                    <Text>Map설정</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
};

export default StartAndFinishLocationComponent;

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        marginTop: 50,
        marginLeft: 20,
        marginRight: 20,
        opacity: 0.5,
    },
    input: {
        borderRadius: 10,
        backgroundColor: '#f0f8ff',
        paddingLeft: 10,
        paddingRight: 10,
        width: 300,
        height: 50,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomColor: '#f0f8ff',
        marginBottom: 10
        // borderBottomWidth: StyleSheet.hairlineWidth,
    },
    inputText: {
        flex: 1,
    },
    textStyle: {
        fontWeight: 'bold',
        fontSize: 17,
        marginRight: 15,
    },
    buttonStyle: {
        flex: 0.5,
        backgroundColor: '#f0f8ff',
        alignItems: 'center',
        justifyContent: 'center',
        width: 10,
        height: 30,
        borderWidth: 1,
        borderColor: 'grey',
        marginBottom: 20,
        borderRadius: 30
    }
});