import React from 'react';
import dayjs from 'dayjs';
import { formatDate, getRelativeDay, getRelativeDayLabel } from "../utils";

/**
 * DateDisplay 组件 Props
 */

/**
 * 日期展示组件
 *
 * @description
 * - 格式化并展示日期
 * - 支持 showRelativeDay：今天/昨天/明天时用相对日替换原日期展示，不展示具体日期
 * - 支持不同的日期顺序（YMD/MDY/DMY）
 * - 支持年月日字段显隐
 * - 支持中文单位（年、月、日）
 * - 支持英文月份格式（简写/完整/数字）
 *
 * @example
 * <DateDisplay
 *   date={dayjs()}
 *   format={{ order: 'YMD', showYear: true, showChineseUnit: true }}
 *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
 * />
 */
export var DateDisplay = function DateDisplay(_ref) {
  var _labels$relativeDay;
  var date = _ref.date,
    format = _ref.format,
    _ref$referenceDate = _ref.referenceDate,
    referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
    style = _ref.style,
    className = _ref.className;
  var labels = format === null || format === void 0 ? void 0 : format.relativeDayLabels;
  var relativeDay = format !== null && format !== void 0 && format.showRelativeDay ? getRelativeDay(date, referenceDate) : null;
  // 相对日替换原日期展示：有今天/昨天/明天时只显示相对日，不展示具体日期
  var formattedDate = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, date.locale()) : formatDate(date, format);

  // 如果没有要显示的内容，返回 null
  if (!formattedDate) {
    return null;
  }

  // 构建样式
  var inlineStyle = {
    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
    color: style === null || style === void 0 ? void 0 : style.color,
    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
  };
  return /*#__PURE__*/React.createElement("span", {
    className: "pisell-datetime-display-date ".concat(className || '').trim(),
    style: inlineStyle
  }, formattedDate);
};
export default DateDisplay;