import React from 'react';
import {View, TextInput, TouchableOpacity} from 'react-native';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons';

export default function SearchBar(props){
  return (
    <View style={{ position: 'absolute', width: '90%', backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, border: 1, margin: 20, height: 50, padding: 0, top: 5, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 5, borderRadius: 50}}>
      <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
        <View style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopLeftRadius: 50, borderBottomLeftRadius: 50}}>
          <Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
        </View>
        <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
          <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={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
          <Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
        </TouchableOpacity> : null}
      </View>
    </View>
  )
}