import React, { useCallback, useEffect, useState } from 'react';
import classnames from 'classnames';
import { TimestampEditor } from '../../../TimestampEditor';
import { useStyles } from './styles';
export var CrosswalkDateEditor = function (_a) {
    var currentValue = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
    var styles = useStyles();
    var _d = useState(currentValue), value = _d[0], setValue = _d[1];
    useEffect(function () {
        setValue(currentValue);
    }, [currentValue]);
    var handleChange = useCallback(function () {
        var newValue = value === null || value === void 0 ? void 0 : value.valueOf();
        if (currentValue !== newValue) {
            onChange(newValue);
        }
    }, [onChange, value, currentValue]);
    return (React.createElement(TimestampEditor, { slotProps: {
            textField: {
                variant: 'filled',
                InputProps: {
                    disableUnderline: true,
                    classes: {
                        input: styles.timestampEditorInput,
                        root: classnames(styles.timestampEditor, classes.root)
                    },
                    onBlur: handleChange
                }
            }
        }, value: value || null, disabled: disabled, onChange: setValue, onClose: handleChange }));
};
