import React, {useState, useEffect} from 'react';
import MapView, {Marker} from 'react-native-maps';
import {StyleSheet, Text, TextInput, View, TouchableOpacity} 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_LOC_REQUEST} from "../reducers/location";


const StartAndFinishLocationComponent = () => {
    const [hasPermission, setHasPermission] = useState(false);
    const [startTextLocation, setStartTextLocation] = useState('');
    const [finishTextLocation, setFinishTextLocation] = useState('');
    const [userLocation, setUserLocation] = useState(null);

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

    const onChangeFinishLocation = (finishTextLocation) => {
        setFinishTextLocation(finishTextLocation);
    };

    const dispatch = useDispatch();
    const setLocation = async () => {
        if (!startTextLocation || !finishTextLocation) {
            return
        }
        console.log(startTextLocation, finishTextLocation);
        await dispatch({
                type: SET_LOC_REQUEST,
                data: {
                    startTextLocation,
                    finishTextLocation
                }
            }
        )

    };

    return (
        <View style={styles.container}>
            <View style={styles.input}>
                <Text style={styles.textStyle}>출발지</Text>
                <TextInput
                    style={styles.inputText}
                    onChangeText={onChangeStartLocation}
                />
                <TouchableOpacity>
                    <MaterialCommunityIcons color={'grey'} name={'map-marker'} size={30}/>
                </TouchableOpacity>

            </View>
            <View style={styles.input}>
                <Text style={styles.textStyle}>도착지</Text>
                <TextInput
                    style={styles.inputText}
                    onChangeText={onChangeFinishLocation}
                />
            </View>
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity style={styles.buttonStyle} onPress={setLocation}>
                    <Text>MAP설정</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.buttonStyle}>
                    <Text>사용자최적경로검색</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
};

export default StartAndFinishLocationComponent;

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

    }
});