import React from 'react';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { isValidDateTimeNumber } from '../../common/utils';
var dateTimeOptions = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour12: false,
  hour: 'numeric',
  minute: 'numeric'
};
var dateOptions = {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
};
var StyledSpan = styled.span.withConfig({
  displayName: "DateTime__StyledSpan",
  componentId: "sc-xstd26-0"
})(["color:", ";"], function (p) {
  return p.theme.color.text;
});
var DateTime = function DateTime(_ref) {
  var value = _ref.value,
    onlyDate = _ref.onlyDate,
    options = _ref.options,
    _ref$invalidValue = _ref.invalidValue,
    invalidValue = _ref$invalidValue === void 0 ? '-' : _ref$invalidValue;
  var intl = useIntl();
  if (isValidDateTimeNumber(value)) {
    var formatOptions = options || (onlyDate ? dateOptions : dateTimeOptions);
    return React.createElement(StyledSpan, null, React.createElement("time", null, intl.formatDate(value, formatOptions)));
  }
  return React.createElement(StyledSpan, null, invalidValue);
};
export default DateTime;