import React from 'react';
import {
  Keyboard,
  NativeSyntheticEvent,
  StyleSheet,
  Text,
  TextInput,
  TextInputProps,
  TextInputSubmitEditingEventData,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import {normalize} from 'react-native-elements';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';

interface SearchBarProps extends TextInputProps {
  onCancel: () => void;
  animationProgress: Animated.SharedValue<number>;
  searching: boolean;
  placeholder: string;
}
const ChatSearchBar: React.FC<SearchBarProps> = ({
  onFocus,
  onBlur,
  onChangeText,
  value,
  onCancel,
  searching,
  animationProgress,
  onLayout,
  placeholder,
}) => {
  const handleSubmit = (
    e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
  ) => {
    e.preventDefault();
    Keyboard.dismiss();
  };

  /*
   * On-search marginRight style ("cancel" button slides and fades in).
   */
  const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
    marginRight: animationProgress.value * 58,
    opacity: animationProgress.value,
  }));

  return (
    <View style={styles.container} onLayout={onLayout}>
      <Animated.View style={styles.inputContainer}>
        <Animated.View style={styles.searchTextContainer}>
          <Text style={styles.searchTextStyes}>To:</Text>
        </Animated.View>
        <TextInput
          style={[styles.input]}
          placeholderTextColor={'#828282'}
          onSubmitEditing={handleSubmit}
          clearButtonMode="always"
          autoCapitalize="none"
          autoCorrect={false}
          {...{placeholder, value, onChangeText, onFocus, onBlur}}
        />
      </Animated.View>
      <Animated.View style={animatedStyles}>
        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
          <Text style={styles.cancelText}>Cancel</Text>
        </TouchableOpacity>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 40,
    paddingHorizontal: 20,
    flexDirection: 'row',
    zIndex: 2,
  },
  searchTextContainer: {marginHorizontal: 12},
  searchTextStyes: {fontWeight: 'bold', fontSize: 14, lineHeight: 17},
  inputContainer: {
    flexGrow: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    borderRadius: 20,
    backgroundColor: '#F0F0F0',
  },
  searchIcon: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: '#000',
    letterSpacing: normalize(0.5),
  },
  cancelButton: {
    height: '100%',
    position: 'absolute',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  cancelText: {
    color: '#818181',
    fontWeight: '500',
  },
});

export default ChatSearchBar;