"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableDateInlineInput = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const date_fns_1 = require("date-fns");
const react_1 = require("react");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const AdaptableContext_1 = require("../../AdaptableContext");
exports.AdaptableDateInlineInput = React.forwardRef((props, ref) => {
    const [hasFocus, setHasFocus] = (0, react_1.useState)(false);
    const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
    const dateProps = {
        format: dateInputOptions.dateFormat,
        locale: dateInputOptions.locale,
    };
    const [inputValue, setInputValue] = (0, react_1.useState)(() => {
        return props.value;
    });
    React.useEffect(() => {
        if (hasFocus) {
            return;
        }
        setInputValue(props.value);
    }, [props.value]);
    const handleInputChange = (e) => {
        setInputValue(e.currentTarget.value);
        const date = (0, date_fns_1.parse)(e.currentTarget.value, dateProps.format, new Date());
        if ((0, date_fns_1.isValid)(date)) {
            props.onChange(e.currentTarget.value);
        }
        else {
            props.onChange(undefined);
        }
    };
    return (React.createElement(Input_1.default, { ...props, onFocus: (event) => {
            props.onFocus?.(event);
            setHasFocus(true);
        }, onBlur: (event) => {
            props.onBlur?.(event);
            setHasFocus(false);
        }, ref: ref, value: inputValue, onChange: (e) => handleInputChange(e), placeholder: props.placeholder ?? dateProps.format, style: props.style, disabled: props.disabled }));
});
