import React, { useCallback } from 'react';
import { useTranslations } from '@wix/patterns-fields';
import { formatDatePart, formatTimePart } from './formatters';
import { isValidDate } from './helpers';
import { useSubCellClickTracker } from './subCellContext';
import { classes } from './View.st.css.js';
export const DateTimeView = ({ value, }) => {
    const { t } = useTranslations();
    const tracker = useSubCellClickTracker();
    const recordClick = useCallback((sub) => () => tracker.record(sub), [tracker]);
    if (!isValidDate(value)) {
        return (React.createElement("span", { className: classes.placeholder }, t('CMS.cellDateTime.placeholder')));
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { "data-sub-cell": "date", className: classes.datePart, onMouseDownCapture: recordClick('date') }, formatDatePart(value)),
        React.createElement("span", { "aria-hidden": true, className: classes.divider }),
        React.createElement("span", { "data-sub-cell": "time", className: classes.timePart, onMouseDownCapture: recordClick('time') }, formatTimePart(value))));
};
//# sourceMappingURL=View.js.map