const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../locales/index.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_useResponsive = require("../../hooks/useResponsive.js");
const require_index$1 = require("../browserSelect/index.js");
const require_constants = require("./constants.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
require("./index.less");
//#region src/components/date-picker/datePickerCpt.tsx
const _excluded = [
	"picker",
	"onChange",
	"value",
	"format",
	"defaultValue",
	"showTime"
];
const isValidDate = (dateString, format) => {
	return window.dayjs(dateString, format, true).isValid();
};
require_useResponsive.configResponsive({
	phone: 0,
	ipad: 768,
	pc: 1080
});
const DatePickerCpt = (props) => {
	const { picker, onChange, value, format: propsFormat, defaultValue, showTime } = props, others = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const { locale } = (0, react.useContext)(antd.ConfigProvider.ConfigContext);
	const [currentShortcut, setCurrentShortcut] = (0, react.useState)("");
	const [open, setOpen] = (0, react.useState)(false);
	const [popupOpen, setPopupOpen] = (0, react.useState)(false);
	const [_value, setValue] = (0, react.useState)(value);
	const [valueStr, setValueStr] = (0, react.useState)("");
	const [error, setError] = (0, react.useState)(false);
	const ref = (0, react.useRef)(null);
	const panelRef = (0, react.useRef)(null);
	const canClose = (0, react.useRef)(true);
	const [panelTimeWidth, setPanelTimeWidth] = (0, react.useState)(0);
	const responsive = require_useResponsive.default();
	const isDesktop = responsive === "pc";
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	(0, react.useEffect)(() => {
		setValue(value);
	}, [value]);
	(0, react.useEffect)(() => {
		var _value$format;
		setValueStr((_value === null || _value === void 0 || (_value$format = _value.format) === null || _value$format === void 0 ? void 0 : _value$format.call(_value, format || "YYYY-MM-DD")) || "");
	}, [_value]);
	const customPresetItems = (0, react.useMemo)(() => {
		const preset = [
			{
				label: require_constants.presetDetailMap["today"].label(),
				value: "today"
			},
			{
				label: require_constants.presetDetailMap["yesterday"].label(),
				value: "yesterday"
			},
			{
				label: require_constants.presetDetailMap["tomorrow"].label(),
				value: "tomorrow"
			},
			{
				label: require_constants.presetDetailMap["next_monday"].label(),
				value: "next_monday"
			},
			{
				label: require_constants.presetDetailMap["last_friday"].label(),
				value: "last_friday"
			},
			{
				label: require_constants.presetDetailMap["first_day_of_this_month"].label(),
				value: "first_day_of_this_month"
			},
			{
				label: require_constants.presetDetailMap["last_day_of_this_month"].label(),
				value: "last_day_of_this_month"
			},
			{
				label: require_constants.presetDetailMap["first_day_of_next_month"].label(),
				value: "first_day_of_next_month"
			},
			{
				label: require_constants.presetDetailMap["last_day_of_last_month"].label(),
				value: "last_day_of_last_month"
			}
		];
		if (!currentShortcut) preset.push({
			label: require_index.getText("date-picker-shortcut-custom"),
			value: "custom"
		});
		return preset;
	}, [currentShortcut]);
	const format = (0, react.useMemo)(() => {
		if (propsFormat) {
			if ((0, _pisell_utils.isFunction)(propsFormat)) return propsFormat(value);
			return propsFormat + ((showTime === null || showTime === void 0 ? void 0 : showTime.format) ? ` ${showTime === null || showTime === void 0 ? void 0 : showTime.format}` : "");
		}
		let localeValue = locale === null || locale === void 0 ? void 0 : locale.locale;
		return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
	}, [propsFormat, locale]);
	const handleSelectChange = (e) => {
		var _presetDetailMap;
		canClose.current = true;
		const shortcut = e.target.value;
		setCurrentShortcut(shortcut);
		const date = (_presetDetailMap = require_constants.presetDetailMap[shortcut]) === null || _presetDetailMap === void 0 ? void 0 : _presetDetailMap.getValue();
		setValue(date);
		handleOk(date);
	};
	const handleTodayClick = () => {
		handleChange((0, dayjs.default)().startOf("day"));
		handleOpenChange(false);
	};
	const handleOpenChange = (visible) => {
		if (!visible) {
			setOpen(visible);
			setTimeout(() => {
				var _ref$current;
				setPopupOpen(visible);
				(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.blur();
			});
			return;
		}
		setOpen(visible);
		setPopupOpen(visible);
	};
	const handleOk = (val) => {
		let returnValue = val;
		if (returnValue !== null) returnValue = returnValue || _value;
		onChange === null || onChange === void 0 || onChange(returnValue, returnValue === null || returnValue === void 0 ? void 0 : returnValue.format("YYYY-MM-DD"));
		handleOpenChange(false);
	};
	const handleChange = (val, valStr, isNotChange) => {
		if (!showTime) canClose.current = true;
		setError(false);
		setCurrentShortcut("");
		setValue(val);
		if (!isNotChange) handleOk(val);
	};
	const handleApply = () => {
		if (error) return;
		handleOk();
	};
	const handleDataStrChange = (e) => {
		const val = e.target.value;
		setValueStr(val);
		if (isValidDate(val, format)) {
			setError(false);
			setValue((0, dayjs.default)(val, format));
		} else setError(true);
	};
	(0, react.useEffect)(() => {
		var _panelRef$current;
		let width = 0;
		const childElements = ((_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.getElementsByClassName("pisell-lowcode-picker-time-panel")) || [];
		if (childElements.length > 0) width = childElements[0].offsetWidth;
		if (width > 0) setPanelTimeWidth(width);
	}, [open]);
	const handleSelect = (val) => {
		canClose.current = !showTime;
		setValue(val);
	};
	const handleTimeChange = (val) => {
		setValue((preVal) => {
			var _preVal$set;
			return (preVal === null || preVal === void 0 || (_preVal$set = preVal.set("hour", (val === null || val === void 0 ? void 0 : val.get("hour")) || 0)) === null || _preVal$set === void 0 || (_preVal$set = _preVal$set.set("minute", (val === null || val === void 0 ? void 0 : val.get("minute")) || 0)) === null || _preVal$set === void 0 ? void 0 : _preVal$set.set("second", (val === null || val === void 0 ? void 0 : val.get("second")) || 0)) || null;
		});
	};
	const timeInputProps = (0, react.useMemo)(() => {
		var _value$format2;
		let step = 1;
		let _format = "";
		if ((showTime === null || showTime === void 0 ? void 0 : showTime.format) === "HH:mm") {
			step = void 0;
			_format = "HH:mm";
		} else if ((showTime === null || showTime === void 0 ? void 0 : showTime.format) === "HH:mm:ss" || showTime) {
			step = 1;
			_format = "HH:mm:ss";
		}
		return {
			step,
			onChange: (e) => {
				const val = e.target.value;
				handleTimeChange(window.dayjs(val, _format));
			},
			value: _value === null || _value === void 0 || (_value$format2 = _value.format) === null || _value$format2 === void 0 ? void 0 : _value$format2.call(_value, _format)
		};
	}, [showTime, _value]);
	if (!picker || picker === "date") return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(antd.DatePicker, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, others), {}, {
		ref,
		onSelect: handleSelect,
		showTime: isDesktop ? showTime : false,
		defaultValue,
		showNow: false,
		onChange: (val, valStr) => handleChange(val, valStr, !isDesktop && showTime),
		open: popupOpen,
		renderExtraFooter: !(!showTime || isDesktop) ? () => {
			return /* @__PURE__ */ react.default.createElement("div", { onMouseDown: (e) => {
				canClose.current = false;
				e.stopPropagation();
			} }, /* @__PURE__ */ react.default.createElement("div", { className: "date-picker-time-label" }, "Time"), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("input", require_objectSpread2._objectSpread2({
				type: "time",
				className: "date-picker-input-time"
			}, timeInputProps))));
		} : void 0,
		className: (0, classnames.default)("pisell-lowcode-mode-date-picker", others.className),
		value: _value,
		onOpenChange: (o) => {
			if (!o && (!canClose.current || showTime)) return;
			handleOpenChange(o);
		},
		mode: "date",
		picker: "date",
		popupClassName: "date-picker-popup-wrap",
		format: currentShortcut ? () => require_constants.presetDetailMap[currentShortcut].label() : format,
		panelRender: (panelNode) => {
			const dom = /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", {
				className: (0, classnames.default)("pisell-lowcode-date-picker-custom-wrap", { ["pisell-lowcode-date-picker-custom-wrap-show-time"]: showTime }),
				ref: panelRef
			}, !showTime && /* @__PURE__ */ react.default.createElement("div", {
				className: "pisell-lowcode-date-picker-custom-action",
				onMouseDown: (e) => {
					canClose.current = false;
					e.stopPropagation();
				},
				style: { width: `calc(100% - 48px - ${panelTimeWidth}px)` }
			}, /* @__PURE__ */ react.default.createElement("div", { style: { width: "50%" } }, /* @__PURE__ */ react.default.createElement(antd.Input, {
				size: "large",
				placeholder: (0, dayjs.default)().format(format || "YYYY-MM-DD"),
				value: valueStr,
				onChange: handleDataStrChange
			}), error && /* @__PURE__ */ react.default.createElement("span", { className: "date-picker-error" }, require_index.getText("date-picker-invalid-date"))), /* @__PURE__ */ react.default.createElement(require_index$1.default, {
				value: currentShortcut || "custom",
				className: "date-picker-toolbar-select",
				options: customPresetItems,
				size: "large",
				onChange: handleSelectChange,
				style: { width: "50%" }
			})), panelNode), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-custom-footer" }, /* @__PURE__ */ react.default.createElement("span", {
				className: "pisell-lowcode-custom-footer-today",
				onClick: handleTodayClick
			}, require_index.getText("date-picker-today")), /* @__PURE__ */ react.default.createElement(antd.Button, {
				type: "primary",
				size: "large",
				onClick: handleApply
			}, require_index.getText("date-picker-apply"))));
			if (isDesktop) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-popup-wrap pisell-lowcode-date-picker-dropdown-mode" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-wrap" }, dom));
			if (responsive === "phone") return /* @__PURE__ */ react.default.createElement(antd.Drawer, {
				placement: "bottom",
				open,
				height: "auto",
				closable: false,
				styles: { content: { borderRadius: "8px 8px 0 0" } },
				bodyStyle: { padding: 0 },
				maskClosable: false
			}, /* @__PURE__ */ react.default.createElement("div", {
				className: "pisell-lowcode-picker-custom-dropdown pisell-lowcode-date-picker-custom-popup-wrap",
				onMouseDown: (e) => e.stopPropagation()
			}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-picker-panel-container pisell-lowcode-picker-date-panel-container" }, dom)));
			return /* @__PURE__ */ react.default.createElement(antd.Modal, {
				width: 458,
				open,
				footer: null,
				closable: false,
				wrapClassName: "pisell-lowcode-date-picker-modal"
			}, /* @__PURE__ */ react.default.createElement("div", {
				className: "pisell-lowcode-picker-custom-dropdown pisell-lowcode-date-picker-custom-popup-wrap",
				onMouseDown: (e) => e.stopPropagation()
			}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-picker-panel-container pisell-lowcode-picker-date-panel-container" }, dom)));
		}
	})));
	return /* @__PURE__ */ react.default.createElement(antd.DatePicker, props);
};
//#endregion
exports.default = DatePickerCpt;
