import React, {useState, useContext, useEffect, useCallback} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, ScrollView} from 'react-native';
import {useDispatch, useSelector} from "react-redux";
import {useNavigation} from '@react-navigation/native';
import styled from "styled-components";
import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";

const Banner = styled.View`
    flex: 1;
    margin-left: 15px;
    margin-bottom: 5px;
    width: 3px;
    height: 3px;
    border-radius: 20px;
    border: 3px solid #EBA900;
`;

const LanePathComponent = (props) => {
    const navigation = useNavigation();
    const [lanePath, setLanePath] = useState(null);
    const [seeLaneList, setSeeLaneList] = useState(false);
    const {pathDetail} = props;


    const changeSeeLaneList = () => {
        setSeeLaneList(!seeLaneList);
        console.log(seeLaneList)
    };

    useEffect(() => {
        console.log(props.pathDetail);
        setLanePath(props.pathDetail);
    }, []);

    return (
        <ScrollView>
            <View style={{flexDirection: 'row', flex: 5}}>
                <View style={styles.pathType}>
                    <MaterialCommunityIcons style={{flex: 1}} color={'#EBA900'} name={'train'} size={20}/>
                    <Text style={{flex: 1, fontSize: 13}}>{pathDetail.time}분</Text>
                </View>
                <View style={{flex: 1}}>
                    <Banner/>
                    <Banner/>
                    <Banner/>
                    <Banner/>
                    <Banner/>
                    <Banner/>
                    <Banner/>
                </View>
                <View style={styles.inputTile}>
                    <Text style={styles.stationStyle}>{pathDetail.startName}역</Text>
                    <Text style={styles.idStyle}>{pathDetail.startID}</Text>
                    {pathDetail.laneList.map((lane, index) => {
                        return (
                            <Text style={styles.laneStyle}>{lane.name}</Text>
                        )
                    })}
                    <View style={styles.stationListStyle}>
                        <Text style={styles.cntStyle}>{pathDetail.stationCnt}개 정류소 이동</Text>
                        <TouchableOpacity style={{flex: 1, marginTop: 17}} onPress={changeSeeLaneList}>
                            <AntDesign color={'darkgrey'} name={'caretdown'} size={15}/>
                        </TouchableOpacity>
                    </View>
                    {seeLaneList === true ?
                        <View>
                            {pathDetail.stationList.map((lane, index) => {
                                return (
                                    <Text>{lane}</Text>
                                )
                            })}
                        </View>
                        :
                        null
                    }
                    <Text style={styles.stationStyle}>{pathDetail.endName}역</Text>
                </View>
            </View>
        </ScrollView>
    );
}
export default LanePathComponent;

const styles = StyleSheet.create({
    inputTile: {
        marginLeft: 6,
        flex: 4,
        color: 'grey',
    },
    inputText: {
        fontWeight: 'normal',
        fontSize: 15,
    },
    pathType: {
        flexDirection: 'column',
        flex: 0.4,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 5,
        marginTop: 10,
    },
    stationStyle: {
        fontWeight: 'bold',
        fontSize: 15,
    },
    idStyle: {
        marginTop: 3,
        marginBottom: 20,
        color: 'grey',
        fontSize: 14
    },
    laneStyle: {
        fontWeight: 'bold',
        fontSize: 15,
        color: '#EBA900'
    },
    cntStyle: {
        flex: 1,
        marginTop: 20,
        marginBottom: 3,
        color: 'grey',
        fontSize: 14
    },
    stationListStyle: {
        flexDirection: 'row',
        flex: 1,
    }
})