import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import { getDayjsLocale } from "../pisellDateTimeDisplay/utils/localeUtils.js";
import { getRelativeDay } from "../pisellDateTimeDisplay/utils/relativeDay.js";
import { parseTimeRange } from "./utils/parseTimeRange.js";
import TimeRangeBlock from "./components/TimeRangeBlock.js";
import DateBlock from "./components/DateBlock.js";
import WeekdayBlock from "./components/WeekdayBlock.js";
import DurationBlock from "./components/DurationBlock.js";
import React, { useMemo } from "react";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import "dayjs/locale/en";
import "./PisellTimeRangeDisplay.less";
//#region src/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.tsx
/**
* PisellTimeRangeDisplay 组件
*
* @description
* 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
* - 同一天：HH:mm-HH:mm，可选显示日期/星期
* - 跨天：起止日期时间
* - 持续时间：d h m s 格式
* - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
*
* @example
* <PisellTimeRangeDisplay
*   startAt="2026-02-04 09:00"
*   endAt="2026-02-04 18:00"
* />
* // => "09:00-18:00" + "9h"
*
* <PisellTimeRangeDisplay
*   startAt={start}
*   endAt={end}
*   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
*   showDateForSameDay
* />
*/
const PisellTimeRangeDisplay = (props) => {
	var _context$engine, _durationFormat$showS;
	const { startAt, endAt, textAlign = "center", fields, showDateForSameDay = true, timeFormat, dateFormat, weekdayFormat, durationFormat, containerStyle, timeStyle, dateStyle, weekdayStyle, durationStyle, locale: localeProp, className, style, onClick } = props;
	const context = useEngineContext();
	const resolvedLocale = localeProp || (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 effectiveLocale = useMemo(() => getDayjsLocale(resolvedLocale), [resolvedLocale]);
	const { start, end, isSameDay } = useMemo(() => parseTimeRange(startAt, endAt, effectiveLocale), [
		startAt,
		endAt,
		effectiveLocale
	]);
	const durationMs = useMemo(() => end.diff(start), [start, end]);
	const { showTimeRange = true, showDate = true, showWeekday = true, showDuration = true, fieldOrder = [
		"weekday",
		"date",
		"time",
		"duration"
	] } = fields || {};
	const showSeconds = (_durationFormat$showS = durationFormat === null || durationFormat === void 0 ? void 0 : durationFormat.showSeconds) !== null && _durationFormat$showS !== void 0 ? _durationFormat$showS : false;
	const effectiveDateFormat = useMemo(() => _objectSpread2({ showRelativeDay: false }, dateFormat), [dateFormat]);
	const referenceDate = dayjs();
	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? getRelativeDay(start, referenceDate) : null;
	const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
	const justifyContent = textAlign === "right" ? "flex-end" : textAlign === "left" ? "flex-start" : "center";
	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,
		justifyContent
	}, style);
	const renderField = (fieldType) => {
		switch (fieldType) {
			case "time": return showTimeRange ? /* @__PURE__ */ React.createElement(TimeRangeBlock, {
				key: "time",
				start,
				end,
				isSameDay,
				timeFormat,
				dateFormat: effectiveDateFormat,
				weekdayFormat,
				referenceDate: dayjs(),
				style: timeStyle
			}) : null;
			case "date":
				if (!showDate) return null;
				if (!isSameDay) return null;
				if (!showDateForSameDay) return null;
				return /* @__PURE__ */ React.createElement(DateBlock, {
					key: "date",
					date: start,
					format: effectiveDateFormat,
					referenceDate: dayjs(),
					style: dateStyle
				});
			case "weekday":
				if (!showWeekday) return null;
				if (!isSameDay) return null;
				if (!showDateForSameDay) return null;
				if (hideWeekdayWhenDateRelative) return null;
				return /* @__PURE__ */ React.createElement(WeekdayBlock, {
					key: "weekday",
					weekday: start,
					format: weekdayFormat,
					style: weekdayStyle
				});
			case "duration": return showDuration ? /* @__PURE__ */ React.createElement(DurationBlock, {
				key: "duration",
				durationMs,
				showSeconds,
				locale: effectiveLocale,
				style: durationStyle
			}) : null;
			default: return null;
		}
	};
	const items = [];
	fieldOrder.forEach((fieldType) => {
		const node = renderField(fieldType);
		if (node != null) items.push({
			type: fieldType,
			node
		});
	});
	if (items.length === 0) return null;
	const renderedWithSeparator = items.flatMap(({ type, node }, index) => {
		const needDotBefore = type === "duration" && index > 0;
		const needDotAfter = type === "duration" && index < items.length - 1;
		const sep = /* @__PURE__ */ React.createElement("span", {
			className: "pisell-time-range-display-sep",
			"aria-hidden": true
		}, " · ");
		const el = React.cloneElement(node, { key: type });
		if (needDotBefore) return [sep, el];
		if (needDotAfter) return [el, sep];
		return [el];
	});
	return /* @__PURE__ */ React.createElement("div", {
		className: `pisell-time-range-display ${className || ""}`.trim(),
		style: containerInlineStyle,
		onClick
	}, renderedWithSeparator);
};
React.memo(PisellTimeRangeDisplay);
//#endregion
export { PisellTimeRangeDisplay };
