import type { ForwardedRef, MutableRefObject } from 'react';
import React, { forwardRef, useRef, useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import type { FreeTextBoxProps } from './types';

export const FreeTextBox = forwardRef(
    (
        {
            label,
            value,
            onChangeText,
            placeholder,
            editable = true,
            onFocus,
            onBlur,
            containerStyle,
            returnKeyType = 'done',
            testID = 'freeTextBox'
        }: FreeTextBoxProps,
        ref: ForwardedRef<TextInput>
    ) => {
        const { colors, theme } = useTheme();
        const styles = themedStyles[theme];
        const [isFocused, setIsFocused] = useState(false);
        const inputRef = useRef<TextInput | null>(null);

        const assignRef = (node: TextInput | null) => {
            inputRef.current = node;
            if (typeof ref === 'function') {
                ref(node);
            } else if (ref) {
                (ref as MutableRefObject<TextInput | null>).current = node;
            }
        };

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

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

        return (
            <View style={[styles.container, containerStyle]} testID={testID}>
                <Text style={styles.label}>{label}</Text>
                <View style={[styles.box, isFocused && styles.boxFocused]}>
                    <TextInput
                        ref={assignRef}
                        style={styles.input}
                        value={value}
                        onChangeText={onChangeText}
                        placeholder={placeholder}
                        placeholderTextColor={colors.midnight200}
                        onFocus={handleFocus}
                        onBlur={handleBlur}
                        onSubmitEditing={() => inputRef.current?.blur()}
                        blurOnSubmit
                        multiline
                        textAlignVertical="top"
                        editable={editable}
                        returnKeyType={returnKeyType}
                        selectionColor={colors.gray0}
                        underlineColorAndroid="transparent"
                        keyboardAppearance="dark"
                        accessibilityLabel={label}
                        testID={`${testID}Input`}
                    />
                </View>
            </View>
        );
    }
);

FreeTextBox.displayName = 'FreeTextBox';

export default FreeTextBox;