import type { ForwardedRef } from 'react';
import React, { forwardRef, useState } from 'react';
import { Pressable, TextInput, View } from 'react-native';
import { useTheme } from '../../branding';
import Search from '../Icons/Search';
import Close from '../Icons/Close';
import themedStyles from './styles';
import type { SearchBarProps } from './types';

export const SearchBar = forwardRef(
    (
        {
            value,
            onChangeText,
            placeholder,
            onFocus,
            onBlur,
            onClear,
            autoFocus = false,
            editable = true,
            containerStyle,
            clearAccessibilityLabel,
            returnKeyType = 'search',
            testID = 'searchBar'
        }: SearchBarProps,
        ref: ForwardedRef<TextInput>
    ) => {
        const { colors, theme } = useTheme();
        const styles = themedStyles[theme];
        const [isFocused, setIsFocused] = useState(false);

        const handleFocus = () => {
            setIsFocused(true);
            onFocus?.();
        };

        const handleBlur = () => {
            setIsFocused(false);
            onBlur?.();
        };

        const handleClear = () => {
            onChangeText('');
            onClear?.();
        };

        const hasValue = value.length > 0;

        return (
            <View
                style={[
                    styles.container,
                    isFocused && styles.containerFocused,
                    containerStyle
                ]}
                testID={testID}
            >
                <View style={styles.iconContainer}>
                    <Search color={colors.midnight200} size={16} />
                </View>
                <TextInput
                    ref={ref}
                    style={styles.input}
                    value={value}
                    onChangeText={onChangeText}
                    placeholder={placeholder}
                    placeholderTextColor={colors.midnight200}
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                    autoFocus={autoFocus}
                    editable={editable}
                    autoCorrect={false}
                    autoCapitalize="none"
                    returnKeyType={returnKeyType}
                    selectionColor={colors.gray0}
                    underlineColorAndroid="transparent"
                    keyboardAppearance="dark"
                    accessibilityLabel={placeholder}
                    testID={`${testID}Input`}
                />
                {hasValue && (
                    <Pressable
                        onPress={handleClear}
                        style={styles.clearButton}
                        accessibilityRole="button"
                        accessibilityLabel={clearAccessibilityLabel}
                        testID={`${testID}ClearButton`}
                    >
                        <Close color={colors.midnight200} size={16} />
                    </Pressable>
                )}
            </View>
        );
    }
);

SearchBar.displayName = 'SearchBar';

export default SearchBar;