import React, {useState} from 'react';
import {Keyboard, TouchableOpacity, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated';
import CustomizedTextInput from '@components/CustomizedTextInput';
import Icon from '@components/Icon';
import Text from '@components/Text';
import {useKeyboard} from '@hooks/useKeyboard';
import {useSearchText} from '@modules/search/hooks/useSearchText';
import {useInstanceProp} from '@redux/selectors';
import {SHARED_STRINGS} from '@shared/strings';
import {COMMON_ANIMATION_DURATION} from '@shared/constants';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface SearchTextInputProps {
  animated?: boolean;
  fromWidgets?: boolean;
}

function SearchTextInput({animated, fromWidgets}: SearchTextInputProps) {
  const {t} = useTranslation();
  const color = useInstanceProp('color');
  const {value, setValue} = useSearchText();
  const [typing, setTyping] = useState(false);
  const animatedStyle = useAnimatedStyle(
    () => ({
      width: withTiming(typing ? '75%' : '100%', {
        duration: COMMON_ANIMATION_DURATION,
      }),
    }),
    [typing],
  );

  const handleShowHiddenKeyboard = (show: boolean) => setTyping(show);

  useKeyboard(
    {
      onShow: () => handleShowHiddenKeyboard(true),
      onHide: () => handleShowHiddenKeyboard(false),
    },
    true,
  );

  const handleCancel = () => {
    setTyping(false);
    setValue('');
    Keyboard.dismiss();
  };

  return (
    <View style={animated ? styles.containerAnimated : styles.container}>
      <Animated.View
        style={[
          styles.searchTextInputContainerStyle,
          animated && animatedStyle,
        ]}>
        <View style={styles.inputContainer}>
          <Icon
            name="search"
            size="sm"
            style={styles.filtersSearchImage}
            color={COLORS.DARK_GRAY}
          />
          <CustomizedTextInput
            style={[
              styles.filtersSearchText,
              !!value.length && styles.clearText,
            ]}
            placeholder={t(
              fromWidgets ? 'general.search_people' : 'general.search',
            )}
            noBorder
            onChangeText={setValue}
            value={value}
          />
        </View>
        {!!value.length && (
          <TouchableOpacity
            onPress={() => setValue('')}
            style={styles.crossContainer}>
            <Icon name="close" size="sm" style={styles.iconContainer} />
          </TouchableOpacity>
        )}
      </Animated.View>
      {animated && (
        <View style={styles.cancel}>
          <TouchableOpacity onPress={handleCancel}>
            <Text
              allowFontScaling={false}
              variant="body2"
              color={color}
              style={styles.cancelSearchTextStyle}>
              {t(SHARED_STRINGS.CANCEL)}
            </Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

export default SearchTextInput;