import React, {useState, useEffect} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import StartAndFinishLocationComponent from "../components/StartAndFinishLocationComponent";
import DateTimePickerComponent from "../components/DateTimePickerComponent";
import styled from "styled-components";
import {useNavigation} from "@react-navigation/native";
import {useDispatch, useSelector} from "react-redux";
import {SET_OPTROUTE_REQUEST} from "../reducers/location";

const GoToMaps = styled.TouchableOpacity`
    flex: 0.5;
    backgroundColor: #f0f8ff;
    align-items: center;
    justify-content: center;
    width: 180px;    
    height: 30px;
    border-radius: 30px;
    border-width: 1px;
    border-color: #a9a9a9;    
    position: absolute;
    left: 55
`;

const LocationTimeSet = () => {
    const navigation = useNavigation();
    const [goToMapsClick, setGoToMapsClick] = useState(false);

    const {startLocation} = useSelector(state => state.location);
    const {endLocation} = useSelector(state => state.location);

    const dispatch = useDispatch();
    const goToMaps = async () => {
        setGoToMapsClick(true);
        navigation.navigate('SetLocationStackNavigation');
        setTimeout(() => {
            setGoToMapsClick(false)
        }, 2000)
    };

    useEffect(() => {
    }, []);

    return (
        <View>
            <StartAndFinishLocationComponent/>
            <DateTimePickerComponent goToMapsClick={goToMapsClick}/>

            <View style={{flexDirection: 'row', marginLeft: 50}}>
                <GoToMaps onPress={goToMaps}>
                    <Text>도착 시간 설정</Text>
                </GoToMaps>
            </View>
        </View>
    )
};


const styles = StyleSheet.create({
    containerStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
        marginTop: 100,
    },
    input: {
        width: 200,
        height: 44,
        padding: 10,
        borderWidth: 1,
        borderColor: '#778899',
        marginBottom: 10,
    }
});

export default LocationTimeSet;