import React, { useCallback, useEffect, useRef, useState } from 'react';
import { CellTimeInput, TimeView as FieldsTimeView, } from '@wix/patterns-fields';
import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
import { CellViewLayout } from '../CellViewLayout';
import { classes } from './Edit.st.css.js';
export const TimeEdit = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, }) => {
    const wrapperRef = useRef(null);
    const timeInputRef = useRef(null);
    const [maskInitialEmpty, setMaskInitialEmpty] = useState(value != null);
    useEffect(() => setMaskInitialEmpty(false), []);
    const closeDropdown = useCallback(() => timeInputRef.current?.blur(), []);
    useCloseOnAncestorScroll(wrapperRef, closeDropdown, !!editTrigger);
    const handleKeyDownCapture = useCallback((e) => {
        if (e.key === 'Escape') {
            e.preventDefault();
            e.stopPropagation();
            onCancel();
        }
    }, [onCancel]);
    return (React.createElement("div", { ref: wrapperRef, onKeyDownCapture: handleKeyDownCapture, className: classes.wrapper },
        React.createElement(CellTimeInput, { ref: timeInputRef, value: value, onChange: onChange, onCommit: onCommit, inputRef: inputRef, dataHook: "time-edit" }),
        maskInitialEmpty && value != null && (React.createElement("div", { "aria-hidden": true, className: classes.overlay },
            React.createElement(CellViewLayout, null,
                React.createElement(FieldsTimeView, { data: value }))))));
};
//# sourceMappingURL=Edit.js.map