import React from 'react';
import {
  StyleSheet,
  TextInput,
  TextInputProps,
  NativeSyntheticEvent,
  TextInputFocusEventData,
  TouchableOpacity,
  Text,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import Animated from 'react-native-reanimated';

interface SearchBarProps extends TextInputProps {
  active: boolean;
}
const SearchBar: React.FC<SearchBarProps> = ({onFocus, onBlur, active}) => {
  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
    // TODO: animate Icon & View.inputContainer.borderColor color to '#000'
    // TODO: animate background color (& page color in results ScrollView) to '#ffff' (last f for opacity)
    // TODO: animate TextInput width and mount "Cancel" button (& animate opacity)
    // OR
    // TODO: just animate "Cancel" button width and opacity (this might be  easier)
    onFocus && onFocus(e);
  };
  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
    // TODO: animate Icon color & View.inputContainer borderColor back
    // TODO: animate background color (and page color in ScrollView) back to '#fff3'
    // TODO: unmount Cancel button (and animate width change)
    onBlur && onBlur(e);
  };

  return (
    <View style={styles.container}>
      <Animated.View style={styles.inputContainer}>
        <Icon name="search" size={25} color="#fff" style={styles.searchIcon} />
        <TextInput
          onFocus={handleFocus}
          onBlur={handleBlur}
          style={styles.input}
          placeholder={'Search...'}
        />
      </Animated.View>
      {active && (
        <TouchableOpacity style={styles.cancelButton}>
          <Text style={styles.cancel}>Cancel</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 40,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    height: '100%',
    paddingHorizontal: 8,
    backgroundColor: '#fff3',
    borderColor: '#fff',
    borderWidth: 1.5,
    borderRadius: 20,
  },
  searchIcon: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
  },
  cancelButton: {
    marginHorizontal: 5,
  },
  cancel: {
    color: '#818181',
    fontWeight: '600',
  },
});

export default SearchBar;