Untitled

import React, { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import { InputMask } from 'primereact/inputmask';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import PropTypes from 'prop-types';
import { v4 as uuidv4 } from 'uuid';
import classNames from 'classnames';
import { useAppState, AppContext } from '@d-lift/core';
import { get } from 'lodash';

const PrimeInputMask = (props) => {
    const pageName = AppContext.pagedetails.getPageName();
    const context = AppContext.pagedetails.getRootContext();
    const readOnlyModeModel = `${context}_${pageName}_readOnlyMode`;
    const readOnlyMode = AppContext.model.getValue(readOnlyModeModel) || false;

    const {
        id,
        model,
        placeholder,
        placeholderKey,
        ariaLabel,
        ariaLabelKey,
        tooltip,
        tooltipKey,
        validations,
        children,
        onBlur,
        disabled,
        onChange,
        ...rest
    } = props;

    const {
        register,
        unregister,
        formState: { errors },
        setValue,
        trigger,
    } = useFormContext();

    const { onChange: formOnChange, ...validationProps } = register(model, {
        validate: validations,
        onBlur: (e) => {
            updateEvent(e);
            if (onBlur) onBlur(e);
        },
    });

    const updateEvent = (event) => {
        Lift.PageEvents.next({
            type: 'userEvent',
            component: 'InputMask',
            newValue: event.target.value,
            pageName,
            context,
        });
    };

    // Get the model value using AppContext.model.getValue and set as initial value
    const [modelValue, setModelValue] = useAppState(
        model,
        AppContext.model.getValue(model) || '',
    );

    useEffect(() => {
        if (modelValue !== undefined) {
            setModelValue(modelValue);
            setValue(model, modelValue);
        }
        return () => {
            unregister(model);
        };
    }, [modelValue]);

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <span className="prime-input-text-wrapper">
                {(props.label || props.labelKey) && (
                    <label className={props.labelClassName}>
                        {props.evalLangText(props.labelKey, props.label)}
                    </label>
                )}
                <div>
                    <InputMask
                        id={id || uuidv4() + '_inputMask'}
                        value={modelValue}
                        aria-label={props.evalLangText(ariaLabelKey, ariaLabel)}
                        placeholder={props.evalLangText(placeholderKey, placeholder)}
                        tooltip={props.evalLangText(tooltipKey, tooltip)}
                        invalid={get(errors, model)?.message}
                        {...rest}
                        onChange={(e) => {
                            setModelValue(e.value);
                            setValue(model, e.value);
                            if (onChange) onChange(e);
                            trigger(model);
                        }}
                        disabled={disabled || readOnlyMode}
                        {...validationProps}
                    >
                        {children}
                    </InputMask>
                    {props.helperTextShowIf &&
                        (props.helperTextLabelKey || props.helperTextLabel) && (
                            <div>
                                <small
                                    className={classNames(
                                        'ux-input-helper-text',
                                        props.helperTextClassName,
                                    )}
                                >
                                    {props.evalLangText(
                                        props.helperTextLabelKey,
                                        props.helperTextLabel,
                                    )}
                                </small>
                            </div>
                        )}

                    {get(errors, model)?.message && (
                        <div
                            id={`errorMessageSpanForElementWithId_${props.id}`}
                            className="p-error"
                        >
                            {get(errors, model)?.message}
                        </div>
                    )}
                </div>
            </span>
        )
    );
};

PrimeInputMask.propTypes = {
    id: PropTypes.string,
    showIf: PropTypes.bool,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
    model: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
    label: PropTypes.string,
    labelKey: PropTypes.string,
    labelClassName: PropTypes.string,
    ariaLabel: PropTypes.string,
    ariaLabelKey: PropTypes.string,
    tooltip: PropTypes.node,
    tooltipKey: PropTypes.string,
    placeholder: PropTypes.string,
    placeholderKey: PropTypes.string,
    helperTextLabel: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    helperTextClassName: PropTypes.string,
    helperTextShowIf: PropTypes.bool,
    children: PropTypes.node,
    evalRefTableData: PropTypes.func,
    displayName: PropTypes.string,