import React from 'react';
import {
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Text,
  View,
  TextInputProps,
  Keyboard,
  NativeSyntheticEvent,
  TextInputSubmitEditingEventData,
} from 'react-native';
import Animated from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/Feather';
import {normalize} from 'react-native-elements';
import {SCREEN_WIDTH} from '../../utils';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);

interface SearchBarProps extends TextInputProps {
  onCancel: () => void;
  top: Animated.Value<number>;
}
const SearchBar: React.FC<SearchBarProps> = ({
  onFocus,
  onBlur,
  onChangeText,
  value,
  onCancel,
  style,
}) => {
  const handleSubmit = (
    e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
  ) => {
    e.preventDefault();
    Keyboard.dismiss();
  };

  return (
    <>
      <View style={[styles.container, style]}>
        <Animated.View style={[styles.inputContainer]}>
          <AnimatedIcon
            name="search"
            color={'#7E7E7E'}
            size={25}
            style={styles.searchIcon}
          />
          <TextInput
            style={[styles.input]}
            placeholder={'Search'}
            placeholderTextColor={'#828282'}
            onSubmitEditing={handleSubmit}
            clearButtonMode="while-editing"
            autoCapitalize="none"
            autoCorrect={false}
            {...{value, onChangeText, onFocus, onBlur}}
          />
        </Animated.View>
        <View style={styles.cancelButtonView}>
          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
            <Text style={styles.cancelText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Text style={styles.helperText}>
        Try searching for "trending on tagg"
      </Text>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 40,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    zIndex: 2,
  },
  inputContainer: {
    flexGrow: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    borderRadius: 20,
    backgroundColor: '#F0F0F0',
  },
  searchIcon: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: '#828282',
    letterSpacing: normalize(0.5),
  },
  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
  cancelButton: {
    position: 'absolute',
    height: '100%',
    justifyContent: 'center',
    paddingHorizontal: 5,
  },
  cancelText: {
    color: '#818181',
    fontWeight: '600',
  },
  helperText: {
    fontWeight: '400',
    fontSize: 14,
    lineHeight: normalize(16.71),
    color: '#828282',
    marginBottom: '2%',
    marginHorizontal: '2.5%',
    marginTop: '1%',
    textAlign: 'center',
    width: SCREEN_WIDTH * 0.74,
  },
});

export default SearchBar;
