import React, {useContext, useState} from 'react';
import {View, StyleSheet, Alert, Dimensions, TextInput} from 'react-native';
import {IconButton} from 'react-native-paper';
import {useNavigation} from '@react-navigation/native';
import {MapContext} from './../context/MapContext';
import {GRAY, PRIMERY} from '../color';

const {width: windowWidth} = Dimensions.get('window');

export default function Search({placeholder, ref}) {
  const navigation = useNavigation();
  const {setSearchQuery, onQuery} = useContext(MapContext);
  const [inputText, setInputText] = useState('');

  const onSubmitEditing = async () => {
    console.log(inputText);
    try {
      const nodes = await onQuery(inputText);
      if (nodes.length) {
        navigation.navigate('DestinationList');
      } else {
        throw Error();
      }
    } catch (err) {
      setSearchQuery(null);
      Alert.alert('알림', '목적지를 정확히 입력해주세요.');
      navigation.navigate('Main');
    }
  };

  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.input}
        placeholder={placeholder}
        placeholderTextColor={GRAY}
        ref={ref}
        value={inputText}
        onChangeText={text => setInputText(text)}
        onSubmitEditing={onSubmitEditing}
      />
      <IconButton
        icon="magnify"
        size={27}
        color={PRIMERY}
        onPress={onSubmitEditing}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    // marginLeft: 8,
    paddingLeft: 20,
    paddingRight: 10,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    width: windowWidth * 0.9,
    borderWidth: 1.5,
    borderRadius: 40,
    borderColor: PRIMERY,
    backgroundColor: 'white',
    elevation: 10,
  },
  input: {
    marginVertical: 2,
    marginHorizontal: 15,
    borderRadius: 40,
    flex: 1,
  },
});