Untitled

import React, { forwardRef, useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import { useAppState } from '@d-lift/core';
import PropTypes from 'prop-types';
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import { v4 as uuidv4 } from 'uuid';
import { get } from 'lodash';

const PrimeTriStateCheckbox = forwardRef((props, ref) => {
    const [modelValue, setModelValue] = useAppState(props.model, null); // Removed need for props.value
    const [internalValue, setInternalValue] = useState(null); // Internal state for managing value
    const { id, model, validations, children, onBlur, onChange, ariaLabel, ariaLabelKey, ...rest } =
        props;

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

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

    // Sync internal state with form state
    useEffect(() => {
        setInternalValue(modelValue);
    }, [modelValue]);

    const handleChange = (e) => {
        setInternalValue(e.value); // Update internal state
        setValue(model, e.value); // Update form state
        setModelValue(e.value); // Update global state if needed
        if (onChange) onChange(e); // Trigger any additional onChange logic
        trigger(model); // Trigger form validation
    };

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <>
                <TriStateCheckbox
                    id={id ? id : uuidv4() + '_triStateCheckbox'}
                    aria-label={props.evalLangText(ariaLabelKey, ariaLabel)}
                    value={internalValue} // Use internal state for value
                    onChange={handleChange}
                    invalid={get(errors, model)?.message && true}
                    {...validationProps}
                    {...rest}></TriStateCheckbox>

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

PrimeTriStateCheckbox.propTypes = {
    id: PropTypes.string,
    showIf: PropTypes.bool,
    ariaLabelKey: PropTypes.string,
};

PrimeTriStateCheckbox.defaultProps = {};

export default PrimeWrapper(PrimeTriStateCheckbox);