import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef } from 'react';
import { useI18n, useFocusWithin, useConfiguration, useTestIds } from '../../../../hooks';
import { msToTimeFormat, timeFormatToMs } from '../utils';
import StyledDateTime from '../DateTime.styles';
import { StyledFormControl } from '../../../FormControl';
import Flex from '../../../Flex';
import PartInput from '../PartInput';
import useAutoFocusNextInput from '../useAutoFocusNextInput';
import { getDurationInputTestIds } from '../../DateTime.test-ids';
const Time = ({ testId, value, onChange, disabled, readOnly, required, status, autoFocus, ...restProps }) => {
    const testIds = useTestIds(testId, getDurationInputTestIds);
    const { locale } = useConfiguration();
    const time = value !== undefined
        ? msToTimeFormat(value)
        : { hour: undefined, minute: undefined, second: undefined };
    const [hourInputRef, minuteInputRef, secondInputRef] = [
        useRef(null),
        useRef(null),
        useRef(null)
    ];
    // Description is handled in DurationInput which wraps this component.
    useAutoFocusNextInput([hourInputRef, minuteInputRef, secondInputRef]);
    const pickParts = () => {
        return [
            hourInputRef.current?.value || undefined,
            minuteInputRef.current?.value || undefined,
            secondInputRef.current?.value || undefined
        ];
    };
    const onFocusChange = useCallback((focused) => {
        if (!focused && !disabled && !readOnly && onChange) {
            const parts = pickParts();
            onChange(parts.some(v => v !== undefined)
                ? timeFormatToMs({
                    hour: Number(parts[0] ?? 0),
                    minute: Number(parts[1] ?? 0),
                    second: Number(parts[2] ?? 0)
                })
                : undefined);
        }
    }, [disabled, readOnly, onChange]);
    const t = useI18n();
    const containerRef = useRef(null);
    useFocusWithin([containerRef], onFocusChange);
    const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
    return (_jsxs(Flex, { "data-testid": testIds.root, as: StyledDateTime, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
            if (e.target === containerRef.current)
                hourInputRef.current?.focus();
        }, ...restProps, children: [_jsx(PartInput, { "data-testid": testIds.controlHour, placeholder: t('hour_placeholder'), "aria-label": displayNames.of('hour'), value: time.hour, readOnly: readOnly, ref: hourInputRef, autoFocus: autoFocus }, 'hour'), ":", _jsx(PartInput, { "data-testid": testIds.controlMinute, placeholder: t('minute_placeholder'), "aria-label": displayNames.of('minute'), value: time.minute, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'), ":", _jsx(PartInput, { "data-testid": testIds.controlSecond, placeholder: t('second_placeholder'), "aria-label": displayNames.of('second'), value: time.second, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second')] }));
};
export default Time;
//# sourceMappingURL=Time.js.map