import React from 'react';
import {useState, useEffect} from 'react';
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
import Theme from '../../../../components/theme.style.js';
import Assets from '../../../../components/assets.manager.js';
import Icon from '../../../../components/icons';

export default function SearchBar(props){
  return (
    <View style={{ position: 'absolute', width: '90%', backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, top: 5, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 5}}>
      <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
        <View style={{flex: 0, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, padding: 10, justifyContent: 'center'}}>
          <Icon.Ionicons name="md-search" size={22} color={props.textColor} />
        </View>
        <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
          <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
        </View>
        {props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
          <Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />
        </TouchableOpacity> : null}
      </View>
    </View>
  )
}