import React, {useRef, useCallback, useMemo, useContext} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {Polyline, Marker} from 'react-native-maps';
import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';
import {MapContext} from '../context/MapContext';
import Map from '../component/Map';
import DriveStatus from './../component/DriveStatus';
import Button from '../component/Button';
import CurrentMarker from '../resoureces/files/images/current_location.png';
import {pageTitle, marginBottom} from '../resoureces/styles/GlobalStyles';
import Camera from '../component/Photo';
import {PRIMERY, WHITE} from '../color';

export default function Driving({navigation}) {
  const {nodes, location, km, setSearchQuery, setNodes} =
    useContext(MapContext);
  //node 마지막 좌표 구하기
  const nodesEndPoint = nodes.slice(-1);
  const resultEndPoint = nodesEndPoint[0];

  //바텀시트
  const bottomSheetModalRef = useRef(null);
  const snapPoints = useMemo(() => ['25%'], []);
  // callbacks
  const handleSheetChanges = useCallback(index => {
    console.log('handleSheetChanges', index);
  }, []);
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleClosePress = useCallback(() => {
    setSearchQuery(null);
    setNodes([]);
    bottomSheetModalRef.current?.close();
    navigation.navigate('Main');
  }, []);

  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <Map
          lat={location.latitude}
          long={location.longitude}
          latDelta={0.001}
          longDelta={0.001}
          followsUserLocation={true}>
          <Marker
            coordinate={location}
            width={50}
            height={50}
            image={CurrentMarker}
          />
          <Marker coordinate={resultEndPoint} />
          <Polyline
            coordinates={nodes}
            strokeWidth={10}
            strokeColor={PRIMERY}
          />
        </Map>
        <Camera />
        <DriveStatus distance={km} onPress={handlePresentModalPress} />
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={0}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}>
          <View style={styles.contentContainer}>
            <Text style={[pageTitle, marginBottom]}>
              운행을 종료 하시겠습니까?
            </Text>
            <Button
              title={'운행종료'}
              padding={10}
              backgroundColor={PRIMERY}
              color={WHITE}
              width={'100%'}
              textAlign={'center'}
              onPress={handleClosePress}
            />
          </View>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
    padding: 16,
  },
  image: {
    width: '100%',
    height: '100%',
    flex: 1,
  },
});