/*
* Copyright 2025 Commonwealth Scientific and Industrial Research
* Organisation (CSIRO) ABN 41 687 119 230.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import debounce from 'lodash.debounce';
import { useCallback, useState } from 'react';
import useReadOnly from '../../../hooks/useReadOnly';
import useValidationFeedbackSeverity from '../../../hooks/useValidationFeedbackSeverity';
import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
import { useQuestionnaireStore } from '../../../stores';
import { DEBOUNCE_DURATION } from '../../../utils/debounce';
import { parseIntegerString } from '../../../utils/parseInputs';
import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
import { FullWidthFormComponentBox } from '../../Box.styles';
import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
import ItemLabel from '../ItemParts/ItemLabel';
import { readIntegerValue } from '../../../utils/readValues';
import type { QuestionnaireResponseItem } from 'fhir/r4';
import IntegerField from './IntegerField';
function IntegerItem(props: BaseItemProps) {
const {
qItem,
qrItem,
isRepeated,
isTabled,
renderingExtensions,
parentIsReadOnly,
feedbackFromParent,
calcExpUpdated,
onQrItemChange
} = props;
const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
// Init input value
const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
const { initialInput } = readIntegerValue(qrItem);
const [input, setInput] = useState(initialInput);
const readOnly = useReadOnly(qItem, parentIsReadOnly);
// Perform validation checks
const { feedback, feedbackSeverity } = useValidationFeedbackSeverity(qItem, feedbackFromParent);
const { displayInstructions } = useRenderingExtensions(qItem);
// Generate instruction ID if instructions exist and there's no feedback
const instructionsId =
displayInstructions && !feedback ? `instructions-${qItem.linkId}` : undefined;
// Event handlers
function handleInputChange(newInput: string) {
const parsedNewInput = parseIntegerString(newInput);
setInput(parsedNewInput);
updateQrItemWithDebounce(parsedNewInput);
}
function handleRepopulateSync(newQrItem: QuestionnaireResponseItem | null) {
if (newQrItem && newQrItem?.answer) {
const { valueInteger: newValueInteger, initialInput: newInput } = readIntegerValue(newQrItem);
setInput(newInput);
onQrItemChange({
...createEmptyQrItem(qItem, answerKey),
answer: [{ id: answerKey, valueInteger: newValueInteger }]
});
return;
}
// At this point newQrItem is null, so create a QRItem to replace it
setInput('');
onQrItemChange(createEmptyQrItem(qItem, answerKey));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
const updateQrItemWithDebounce = useCallback(
debounce((parsedNewInput: string) => {
if (parsedNewInput === '') {
onQrItemChange(createEmptyQrItem(qItem, answerKey));
} else {
onQrItemChange({
...createEmptyQrItem(qItem, answerKey),
answer: [{ id: answerKey, valueInteger: parseInt(parsedNewInput) }]
});
}
}, DEBOUNCE_DURATION),
[onQrItemChange, qItem]
); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
if (isRepeated) {
return (
);
}
return (
onFocusLinkId(qItem.linkId)}>
}
fieldChildren={
}
feedback={feedback ?? undefined}
/>
);
}
export default IntegerItem;