import React, {useContext} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Map from '../component/Map';
import BottomDrop from './../component/BottomDrop';
import Button from './../component/Button';
import {
  pageTitle,
  directionAlign,
  pageTitleBox,
} from './../resoureces/styles/GlobalStyles';
import {MapContext} from './../context/MapContext';
import {Polyline, Marker} from 'react-native-maps';
import EndPointMarker from '../resoureces/files/images/end_point.png';
import {PRIMERY, WHITE} from '../color';

export default function DestinationList({navigation}) {
  const {searchQuery, nodes} = useContext(MapContext);
  console.log('List', nodes.length);
  //node 중심 좌표 구하기
  const nodesCenterLength = Math.ceil(nodes.length / 2);
  const nodesCenterPoint = nodes[nodesCenterLength];
  console.log('nodesCenterPoint', nodesCenterPoint);

  //node 마지막 좌표 구하기
  const nodesEndPoint = nodes.slice(-1);
  const resultEndPoint = nodesEndPoint[0];

  return (
    <View style={styles.container}>
      <View style={pageTitleBox}>
        <Text style={pageTitle}>{searchQuery}</Text>
      </View>
      <Map
        lat={nodesCenterPoint.latitude}
        long={nodesCenterPoint.longitude}
        latDelta={0.3}
        longDelta={0.3}
        showsUserLocation={true}>
        <Marker coordinate={resultEndPoint} image={EndPointMarker} />
        <Polyline coordinates={nodes} strokeWidth={10} strokeColor={PRIMERY} />
      </Map>
      <BottomDrop>
        <View style={[directionAlign, {flexDirection: 'row'}]}>
          <Text style={{flex: 9}}>{searchQuery}</Text>
          <Button
            title={'운행 시작'}
            padding={10}
            color={WHITE}
            backgroundColor={PRIMERY}
            onPress={() => {
              navigation.navigate('Driving');
            }}
          />
        </View>
      </BottomDrop>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: WHITE,
  },
});