import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import { getDayjsLocale, isChinese } from "./utils/localeUtils.js";
import { useCurrentTime } from "./hooks/useCurrentTime.js";
import { getRelativeDay, getRelativeDayLabel } from "./utils/relativeDay.js";
import { getRefreshInterval } from "./utils/getRefreshInterval.js";
import TimeDisplay from "./components/TimeDisplay.js";
import DateDisplay from "./components/DateDisplay.js";
import WeekdayDisplay from "./components/WeekdayDisplay.js";
import { DATETIME_DISPLAY_FORMATS } from "./formats/dateTimeDisplayFormats.js";
import React from "react";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import "dayjs/locale/en";
import "./PisellDateTimeDisplay.less";
//#region src/components/pisellDateTimeDisplay/PisellDateTimeDisplay.tsx
/**
* PisellDateTimeDisplay 组件
*
* @description
* 专注于展示当前时间的组件，支持：
* - 当前日期、时间、星期展示
* - 多种布局方式（水平、垂直、单行）
* - 丰富的格式化配置
* - 自动刷新
* - 国际化支持
*
* @example
* // 基础用法
* <PisellDateTimeDisplay />
*
* // 自定义格式
* <PisellDateTimeDisplay
*   layout="vertical"
*   timeFormat={{ use12Hour: true, showSeconds: true }}
*   dateFormat={{ showYear: true, showChineseUnit: true }}
* />
*
* // 自定义格式化字符串
* <PisellDateTimeDisplay
*   customFormat="YYYY-MM-DD HH:mm:ss"
* />
*/
const PisellDateTimeDisplay = (props) => {
	var _context$engine, _ref, _presetSource$localeK;
	const { value: valueProp, layout = "horizontal", textAlign = "center", fields, formatByLocale, timeFormat, dateFormat, weekdayFormat, customFormat, inlineSeparator = " · ", containerStyle, timeStyle, dateStyle, weekdayStyle, refreshInterval, disableAutoRefresh = false, locale, onTimeUpdate, onClick, className, style } = props;
	const context = useEngineContext();
	const resolvedLocale = locale || (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en";
	const localeKey = getDayjsLocale(resolvedLocale);
	const baseLocale = localeKey.split("-")[0];
	const presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : DATETIME_DISPLAY_FORMATS;
	const preset = (_ref = (_presetSource$localeK = presetSource[localeKey]) !== null && _presetSource$localeK !== void 0 ? _presetSource$localeK : presetSource[baseLocale]) !== null && _ref !== void 0 ? _ref : {};
	const effectiveFields = _objectSpread2(_objectSpread2({}, preset.fields), fields);
	const effectiveDateFormat = _objectSpread2(_objectSpread2({}, preset.dateFormat), dateFormat);
	const effectiveTimeFormat = _objectSpread2(_objectSpread2({}, preset.timeFormat), timeFormat);
	const effectiveWeekdayFormat = _objectSpread2(_objectSpread2({}, preset.weekdayFormat), weekdayFormat);
	const currentTime = useCurrentTime({
		refreshInterval: refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(effectiveTimeFormat),
		disabled: disableAutoRefresh || valueProp !== void 0,
		locale: resolvedLocale,
		onUpdate: onTimeUpdate
	});
	const displayTime = valueProp !== void 0 && valueProp !== null ? dayjs(valueProp).locale(localeKey) : currentTime;
	if (customFormat) {
		const formattedTime = displayTime.format(customFormat);
		const containerInlineStyle = _objectSpread2({
			background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
			borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
			border: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.border,
			boxShadow: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow,
			padding: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.padding,
			textAlign
		}, style);
		return /* @__PURE__ */ React.createElement("div", {
			className: `pisell-datetime-display pisell-datetime-display-custom ${className || ""}`.trim(),
			style: containerInlineStyle,
			onClick
		}, /* @__PURE__ */ React.createElement("span", null, formattedTime));
	}
	const { showTime = true, showDate = true, showWeekday = true, fieldOrder = [
		"time",
		"date",
		"weekday"
	] } = effectiveFields || {};
	const referenceDate = dayjs();
	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? getRelativeDay(displayTime, referenceDate) : null;
	const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
	const containerInlineStyle = _objectSpread2({
		background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
		borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
		border: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.border,
		boxShadow: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.boxShadow,
		padding: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.padding,
		gap: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.gap,
		textAlign
	}, style);
	const renderField = (fieldType) => {
		switch (fieldType) {
			case "time": return showTime ? /* @__PURE__ */ React.createElement(TimeDisplay, {
				key: "time",
				time: displayTime,
				format: effectiveTimeFormat,
				style: timeStyle
			}) : null;
			case "date": return showDate ? /* @__PURE__ */ React.createElement(DateDisplay, {
				key: "date",
				date: displayTime,
				format: effectiveDateFormat,
				referenceDate: dayjs(),
				style: dateStyle
			}) : null;
			case "weekday": return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ React.createElement(WeekdayDisplay, {
				key: "weekday",
				weekday: displayTime,
				format: effectiveWeekdayFormat,
				style: weekdayStyle
			}) : null;
			default: return null;
		}
	};
	if (layout === "inline") {
		const inlineSeparators = effectiveFields === null || effectiveFields === void 0 ? void 0 : effectiveFields.inlineSeparators;
		const renderedFields = fieldOrder.map(renderField).filter((field) => field !== null);
		if (renderedFields.length === 0) return null;
		return /* @__PURE__ */ React.createElement("div", {
			className: `pisell-datetime-display pisell-datetime-display-inline ${className || ""}`.trim(),
			style: containerInlineStyle,
			onClick
		}, renderedFields.map((field, index) => {
			var _inlineSeparators$ind;
			return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, field, index < renderedFields.length - 1 && /* @__PURE__ */ React.createElement("span", { className: "pisell-datetime-display-separator" }, (_inlineSeparators$ind = inlineSeparators === null || inlineSeparators === void 0 ? void 0 : inlineSeparators[index]) !== null && _inlineSeparators$ind !== void 0 ? _inlineSeparators$ind : inlineSeparator));
		}));
	}
	const renderedFields = fieldOrder.map(renderField).filter((field) => field !== null);
	if (renderedFields.length === 0) return null;
	if (layout === "horizontal") {
		const timeField = showTime ? renderField("time") : null;
		const isChinese$1 = isChinese(displayTime.locale());
		if (showDate && showWeekday) {
			var _labels$relativeDay;
			const labels = effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.relativeDayLabels;
			const dateStr = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, displayTime.locale()) : isChinese$1 ? displayTime.format("M月D日") : displayTime.format("D MMM");
			const weekdayStr = displayTime.format("ddd");
			const combinedStr = relativeDay ? dateStr : isChinese$1 ? `${weekdayStr} ${dateStr}` : `${weekdayStr}, ${dateStr}`;
			const dateInlineStyle = {
				fontSize: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.fontSize,
				fontWeight: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.fontWeight,
				color: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.color,
				lineHeight: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.lineHeight
			};
			return /* @__PURE__ */ React.createElement("div", {
				className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
				style: containerInlineStyle,
				onClick
			}, timeField, /* @__PURE__ */ React.createElement("span", {
				className: "pisell-datetime-display-date pisell-datetime-display-combined",
				style: dateInlineStyle
			}, combinedStr));
		}
		const dateField = showDate ? renderField("date") : null;
		const weekdayField = showWeekday ? renderField("weekday") : null;
		return /* @__PURE__ */ React.createElement("div", {
			className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
			style: containerInlineStyle,
			onClick
		}, timeField, (dateField || weekdayField) && /* @__PURE__ */ React.createElement("div", { className: "pisell-datetime-display-date-weekday-row" }, dateField, weekdayField));
	}
	return /* @__PURE__ */ React.createElement("div", {
		className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
		style: containerInlineStyle,
		onClick
	}, renderedFields);
};
var PisellDateTimeDisplay_default = React.memo(PisellDateTimeDisplay);
//#endregion
export { PisellDateTimeDisplay_default as default };
