Untitled

import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { InputTextarea } from 'primereact/inputtextarea';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { v4 as uuidv4 } from 'uuid';

const PrimeInputTextarea = (props) => {
    const {
        register,
        formState: { errors },
    } = useForm({
        mode: 'all',
    });
    const { id, model, validations, children, onBlur, onChange, ...rest } = props;

    const [inputValue, setInputValue] = useState(props.value || '');
    const [charsRemaining, setCharsRemaining] = useState(props.maxLength || 0);
    const [charsEntered, setCharsEntered] = useState(0);

    const calculateLength = props.calculateLength || ((str) => str.length);

    useEffect(() => {
        const initialText = props.value || '';
        const remainingLength = props.maxLength - calculateLength(initialText);
        setInputValue(initialText); // Ensure state reflects initial value
        setCharsRemaining(remainingLength);
        setCharsEntered(initialText.length);
    }, [props.value]);

    const handleInputChange = (event) => {
        const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
        const currentLength = calculateLength(value);
        const remainingLength = props.maxLength - currentLength;

        setInputValue(value); // Update component's own state
        setCharsRemaining(remainingLength);
        setCharsEntered(currentLength);
        props.onChange && props.onChange({ ...event, target: { ...event.target, value } });
    };

    const getCharRemainingText = () => {
        const charRemainingText = props.charRemainingKey || 'You have {0} characters remaining.';
        return charRemainingText.replace(/\{0\}/g, charsRemaining);
    };

    const getCharEnteredText = () => {
        const charEnteredText = props.charEnteredKey || '{0} characters entered.';
        return charEnteredText.replace(/\{0\}/g, charsEntered);
    };

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <span>
                <div>
                    <label className={props.labelClassName}>
                        {props.evalLangText(props.labelKey, props.label)}
                    </label>
                </div>
                <span>
                    <InputTextarea
                        id={id ? id : uuidv4() + '_inputTextarea'}
                        value={inputValue}
                        {...rest}
                        {...register(model, {
                            validate: validations,
                            onChange: (e) => {
                                handleInputChange(e);
                                if (onChange) {
                                    onChange(e);
                                }
                            },
                            onBlur: (e) => {
                                if (onBlur) {
                                    onBlur(e);
                                }
                            },
                        })}>
                        {children}
                    </InputTextarea>

                    {props.helperTextShowIf &&
                        (props.helperTextLabelKey || props.helperTextLabel) && (
                            <div>
                                <small
                                    className={classNames(
                                        'ux-input-helper-text',
                                        props.helperTextClassName,
                                    )}>
                                    {props.evalLangText(
                                        props.helperTextLabelKey,
                                        props.helperTextLabel,
                                    )}
                                </small>
                            </div>
                        )}

                    {props.showRemaining && (
                        <div>
                            <small
                                id={`${props.id}_characterRemaining`}
                                className={classNames(
                                    `noChar_${charsRemaining === 0}`,
                                    props.charRemainingClass,
                                )}>
                                {getCharRemainingText()}
                            </small>
                        </div>
                    )}

                    {props.showCurrent && (
                        <div>
                            <small
                                id={`${props.id}_charEntered`}
                                className={classNames(
                                    `noChar_${charsEntered === parseInt(props.maxLength, 10)}`,
                                    props.charEnteredClass,
                                )}>
                                {getCharEnteredText()}
                            </small>
                        </div>
                    )}

                    {errors[model]?.message && (
                        <div
                            id={`errorMessageSpanForElementWithId_${props.id}`}
                            className="p-error"
                            // role="alert"
                            //is-error="true"
                        >
                            {errors[model]?.message}
                        </div>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputTextarea.propTypes = {
    /** Define/Generate a unique id for the component */
    id: PropTypes.string,
    /** Determines if the component is hidden or shown */
    showIf: PropTypes.bool,
    /** Accepts a Content Manager key and assigns the value to the label of the input */
    label: PropTypes.string,
    labelKey: PropTypes.string,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
    /** Prop that automatically capitalizes entered text */
    autoCapitalize: PropTypes.bool,
    /** Assistive component that conveys additional guidance about the field, such as how it will be used and what types in values should be provided. */
    helperTextLabel: PropTypes.string,
    /** Helper Text via Label Key for locale compatibility */
    helperTextLabelKey: PropTypes.string,
    /** Helper text class name */
    helperTextClassName: PropTypes.string,
    /** Determines if helper text is hidden or shown */
    helperTextShowIf: PropTypes.bool,
    /** Determine whether characters remaining count will show */
    showRemaining: PropTypes.bool,
    /** Determine whether how many characters entered count will show  */
    showCurrent: PropTypes.bool,
    /** Characters Remaining WcmKey */
    charRemainingKey: PropTypes.string,
    /** Characters Entered WcmKey */
    charEnteredKey: PropTypes.string,
    /** Additional classes to add to the characters remaining text */
    charRemainingClass: PropTypes.string,
    /** Additional classes to add to the characters entered text */
    charEnteredClass: PropTypes.string,
    /** The maximum length of the text input */
    maxLength: PropTypes.number,
    /** Function to calculate the length of the text */
    calculateLength: PropTypes.func,
};

PrimeInputTextarea.defaultProps = {
    maxLength: 100, // Default maxLength if not provided
};

export default PrimeWrapper(PrimeInputTextarea);