ncore-ui-kit/src/components/textAreaInput/index.tsx

import {
    useImperativeHandle,
    forwardRef,
    useEffect,
    useState,
    useRef
} from "react";
import {
    TextInput as NativeTextInput,
    TouchableOpacity,
    Keyboard,
    View
} from "react-native";
import type ITextAreaInputProps from "./type";
import {
    type TextAreaInputInstance,
    type ITextAreaInputRef,
    type TextAreaInputType
} from "./type";
import stylesheet, {
    getTextAreaInputType,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    type RefForwardingComponent
} from "../../types";
import type ITextProps from "../text/type";
import {
    BadgeQuestionMark as BadgeQuestionMarkIcon,
    BadgeAlert as BadgeAlertIcon,
    BadgeCheck as BadgeCheckIcon,
    BadgeInfo as BadgeInfoIcon,
    CircleX as CircleXIcon,
    BadgeX as BadgeXIcon,
    type LucideIcon
} from "lucide-react-native";
import Text from "../text";

const TextInputTypeIcon: Record<Exclude<TextAreaInputType, "default">, LucideIcon> = {
    "question": BadgeQuestionMarkIcon,
    "success": BadgeCheckIcon,
    "warning": BadgeAlertIcon,
    "info": BadgeInfoIcon,
    "danger": BadgeXIcon
};

const TextAreaInput: RefForwardingComponent<ITextAreaInputRef, ITextAreaInputProps> = ({
    isAutoKeyboardDismissOnBlur = true,
    rightIcon: RightIconComponentProp,
    hintTextIcon: HintTextIconProp,
    spreadBehaviour = "baseline",
    isShowLengthLimiter = true,
    isShowHintTextIcon = false,
    isUpdateOnRealtime = false,
    icon: IconComponentProp,
    hintTextContainerStyle,
    isCleanEnabled = false,
    contentContainerStyle,
    subTitle = "Optional",
    onFocus: onFocusProp,
    isRequired = false,
    isDisabled = false,
    onBlur: onBlurProp,
    type = "default",
    rightIconOnPress,
    maxHeight = 350,
    customLocalize,
    rightIconStyle,
    isShowSubTitle,
    cleanIconStyle,
    onChangeText,
    initialValue,
    customTheme,
    placeholder,
    iconOnPress,
    isOptional,
    validation,
    inputStyle,
    maxLength,
    iconStyle,
    hintText,
    style,
    title,
    ...props
}, ref) => {
    const {
        inlineSpaces,
        typography,
        radiuses,
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext(customTheme);

    const {
        localize
    } = NCoreUIKitLocalize.useContext(customLocalize);

    const currentType = getTextAreaInputType({
        type
    });

    const inputRef = useRef<TextAreaInputInstance | null>(null);

    const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;

    const [
        value,
        setValue
    ] = useState(initialValue ? initialValue : "");

    const [
        isFocused,
        setIsFocused
    ] = useState(false);

    const {
        lengthLimiterContainer: lengthLimiterContainerDynamicStyle,
        titleContainer: titleContainerDynamicStyle,
        inputContainer: inputContainerDynamicStyle,
        hintTextIcon: hintTextIconDynamicStyle,
        cleanButton: cleanButtonDynamicStyle,
        rightIcon: rightIconDynamicStyle,
        container: containerDynamicStyle,
        hintText: hintTextDynamicStyle,
        required: requiredDynamicStyle,
        subTitle: subTitleDynamicStyle,
        content: contentDynamicStyle,
        overlay: overlayDynamicStyle,
        title: titleDynamicStyle,
        input: inputDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        icon: IconComponentProp ? true : false,
        spreadBehaviour,
        inlineSpaces,
        currentType,
        isDisabled,
        typography,
        isFocused,
        maxHeight,
        radiuses,
        borders,
        spaces,
        colors,
        title,
        type
    });

    useEffect(() => {
        if(initialValue) {
            inputRef.current?.setNativeProps({
                text: initialValue
            });
        }
    }, []);

    useImperativeHandle(
        ref,
        () => ({
            updateValue,
            cleanText,
            focus,
            blur
        }),
        []
    );

    const titleProps: ITextProps = {
        color: currentType.titleColor,
        variant: "bodyLargeSize"
    };

    const iconProps: NCoreUIKit.IconCallbackProps = {
        size: Number(typography.labelLargeSize.fontSize) + 6,
        color: currentType.iconColor
    };

    if(isDisabled) {
        iconProps.color = "disabled";
    }

    const blur = () => {
        inputRef.current?.blur();
    };

    const focus = () => {
        inputRef.current?.focus();
    };

    const cleanText = () => {
        setValue("");

        inputRef.current?.clear();

        if(onChangeText) {
            onChangeText("");
        }
    };

    const updateValue = (text: string) => {
        setValue(text);

        inputRef.current?.setNativeProps({
            text: text
        });
    };

    const onFocus = () => {
        setIsFocused(true);

        if(onFocusProp) onFocusProp();
    };

    const onBlur = () => {
        setIsFocused(false);

        inputRef.current?.blur();

        if(isAutoKeyboardDismissOnBlur) {
            Keyboard.dismiss();
        }

        if(onBlurProp) onBlurProp();
    };

    const renderCleanButton = () => {
        if(isDisabled) {
            return null;
        }

        if(!isCleanEnabled || !value.length) {
            return null;
        }

        return <TouchableOpacity
            style={[
                cleanIconStyle,
                stylesheet.cleanButton,
                cleanButtonDynamicStyle
            ]}
            onPress={() => {
                if(inputRef.current) inputRef.current?.clear();

                if(onChangeText) {
                    onChangeText("");
                }

                setValue("");
            }}
        >
            <CircleXIcon
                color={colors.content.icon[currentType.iconColor]}
                size={20}
            />
        </TouchableOpacity>;
    };

    const renderIcon = () => {
        if (!IconComponentProp) {
            return null;
        }

        return <TouchableOpacity
            onPress={iconOnPress}
            style={[
                iconStyle,
                stylesheet.icon,
                iconDynamicStyle
            ]}
        >
            <IconComponentProp
                color={iconProps.color}
                size={iconProps.size}
            />
        </TouchableOpacity>;
    };

    const renderRightIcon = () => {
        if (!RightIconComponentProp) {
            return null;
        }

        if(isCleanEnabled && value.length > 0) {
            return null;
        }

        return <TouchableOpacity
            onPress={rightIconOnPress}
            style={[
                rightIconStyle,
                stylesheet.rightIcon,
                rightIconDynamicStyle
            ]}
        >
            <RightIconComponentProp
                color={iconProps.color}
                size={iconProps.size}
            />
        </TouchableOpacity>;
    };

    const renderHintIcon = () => {
        if(!isShowHintTextIcon) {
            return null;
        }

        if(HintTextIconProp) {
            return <HintTextIconProp
                color={isDisabled ? "disabled" : currentType.hintTextIconColor}
                size={20}
                style={[
                    stylesheet.hintTextIcon,
                    hintTextIconDynamicStyle
                ]}
            />;
        }

        const CurrentHintIcon = TextInputTypeIcon[type === "default" ? "question" : type];

        let hintIconColor = colors.content.icon[currentType.hintTextIconColor];

        if(isDisabled) {
            hintIconColor = colors.system.state.content.disabled[styleType];
        }

        return <CurrentHintIcon
            color={hintIconColor}
            size={20}
            style={[
                stylesheet.hintTextIcon,
                hintTextIconDynamicStyle
            ]}
        />;
    };

    const renderHintText = () => {
        if (!hintText) {
            return null;
        }

        return <View
            style={[
                hintTextContainerStyle,
                stylesheet.hintText,
                hintTextDynamicStyle
            ]}
        >
            {renderHintIcon()}
            <Text
                customColor={isDisabled ? colors.system.state.content.disabled[styleType] : undefined}
                color={currentType.hintTextColor}
                variant="labelSmallSize"
            >
                {hintText}
            </Text>
        </View>;
    };

    const renderRequired = () => {
        if(!isRequired) {
            return null;
        }

        return <Text
            color="danger"
            style={[
                stylesheet.required,
                requiredDynamicStyle
            ]}
        >*</Text>;
    };

    const renderSubtitle = () => {
        if(!isShowSubTitle && !isOptional) {
            return null;
        }

        return <Text
            variant="labelLargeSize"
            color={titleProps.color}
            style={[
                stylesheet.subTitle,
                subTitleDynamicStyle
            ]}
        >
            ( {isOptional ? localize("is-optional") : subTitle} )
        </Text>;
    };

    const renderTitle = () => {
        if (!title) {
            return null;
        }

        return <View
            style={[
                stylesheet.titleContainer,
                titleContainerDynamicStyle
            ]}
        >
            {renderRequired()}
            <Text
                {...titleProps}
                variant={titleProps.variant}
                color={titleProps.color}
                style={[
                    stylesheet.title,
                    titleDynamicStyle
                ]}
            >
                {title}
            </Text>
            {renderSubtitle()}
        </View>;
    };

    const renderLengthLimiter = () => {
        if(!isShowLengthLimiter || !maxLength) {
            return null;
        }

        return <View
            style={[
                stylesheet.lengthLimiterContainer,
                lengthLimiterContainerDynamicStyle
            ]}
        >
            <Text>
                {value.length} / {maxLength}
            </Text>
        </View>;
    };

    const renderInput = () => {
        return <View
            style={[
                stylesheet.inputContainer,
                inputContainerDynamicStyle
            ]}
        >
            <NativeTextInput
                {...props}
                placeholderTextColor={colors.content.text[currentType.placeholderColor]}
                underlineColorAndroid="rgba(255,255,255,0)"
                placeholder={placeholder}
                allowFontScaling={false}
                editable={!isDisabled}
                maxLength={maxLength}
                multiline={true}
                onFocus={onFocus}
                onBlur={onBlur}
                ref={inputRef}
                onEndEditing={(t) => {
                    const text = t.nativeEvent.text;

                    if(!isUpdateOnRealtime) {
                        if (validation) {
                            if (validation(text)) {
                                setValue(text);

                                if(onChangeText) onChangeText(text);
                            }
                        } else {
                            setValue(text);

                            if(onChangeText) onChangeText(text);
                        }
                    }
                }}
                onChangeText={(text) => {
                    if(isUpdateOnRealtime) {
                        if (validation) {
                            if (validation(text)) {
                                setValue(text);

                                if(onChangeText) onChangeText(text);
                            }
                        } else {
                            setValue(text);

                            if(onChangeText) onChangeText(text);
                        }
                    }
                }}
                style={[
                    inputStyle,
                    stylesheet.input,
                    inputDynamicStyle
                ]}
            />
            {renderLengthLimiter()}
        </View>;
    };

    const renderOverlay = () => {
        return <View
            style={[
                stylesheet.overlay,
                overlayDynamicStyle
            ]}
        />;
    };

    return <TouchableOpacity
        disabled={isDisabled}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
        onPress={() => {
            if(!isDisabled) inputRef.current?.focus();
        }}
    >
        {renderTitle()}

        <View
            style={[
                contentContainerStyle,
                stylesheet.content,
                contentDynamicStyle
            ]}
        >
            {renderOverlay()}

            {renderIcon()}

            {renderInput()}

            {renderCleanButton()}
            {renderRightIcon()}
        </View>

        {renderHintText()}
    </TouchableOpacity>;
};
export default forwardRef(TextAreaInput);