import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { disabledDate } from "../../components/booking/info/dateRange/index.js";
import dayjs from "dayjs";
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { Form, Select } from "antd";
import { locales } from "@pisell/utils";
import { DatePicker as DatePicker$1, Page } from "@pisell/materials";
import { CalendarOutlined } from "@ant-design/icons";
import "./MultiDayTimeSelect.less";
//#region src/pro/multiDayTimeSelect/MultiDayTimeSelect.tsx
const RangePicker = DatePicker$1.RangePicker;
const MultiDayTimeSelect = forwardRef(({ maxDays = 30, defaultStartDate, separateStartEnd = false, value, onChange, locale = "en", disabled = false, startDateLabel, endDateLabel, durationLabel }, ref) => {
	const [form] = Form.useForm();
	const [internalValue, setInternalValue] = useState(null);
	useImperativeHandle(ref, () => ({
		validate: function() {
			var _ref = _asyncToGenerator(function* () {
				yield form.validateFields();
			});
			return function validate() {
				return _ref.apply(this, arguments);
			};
		}(),
		getValue: () => internalValue
	}));
	const formatLocale = useMemo(() => {
		return locale === "en" || locale === "en-US" ? "DD/MM/YYYY" : "YYYY-MM-DD";
	}, [locale]);
	const durationOptions = useMemo(() => {
		const options = [];
		for (let i = 1; i <= maxDays; i++) options.push({
			label: `${i} ${i === 1 ? locale === "en" ? "day" : "天" : locale === "en" ? "days" : "天"}`,
			value: i
		});
		const currentDuration = internalValue === null || internalValue === void 0 ? void 0 : internalValue.duration;
		if (currentDuration && currentDuration > maxDays) options.push({
			label: `${currentDuration} ${currentDuration === 1 ? locale === "en" ? "day" : "天" : locale === "en" ? "days" : "天"}`,
			value: currentDuration,
			disabled: true
		});
		return options;
	}, [
		maxDays,
		locale,
		internalValue === null || internalValue === void 0 ? void 0 : internalValue.duration
	]);
	useEffect(() => {
		if (value) {
			setInternalValue(value);
			form.setFieldsValue({
				dateRange: separateStartEnd ? void 0 : [value.startDate, value.endDate],
				startDate: separateStartEnd ? value.startDate : void 0,
				endDate: separateStartEnd ? value.endDate : void 0,
				duration: value.duration
			});
		} else {
			const startDate = defaultStartDate || dayjs();
			const endDate = startDate.add(1, "day");
			const initialValue = {
				startDate,
				endDate,
				duration: 1
			};
			setInternalValue(initialValue);
			form.setFieldsValue({
				dateRange: separateStartEnd ? void 0 : [startDate, endDate],
				startDate: separateStartEnd ? startDate : void 0,
				endDate: separateStartEnd ? endDate : void 0,
				duration: 1
			});
			onChange === null || onChange === void 0 || onChange(initialValue);
		}
	}, [
		value,
		defaultStartDate,
		separateStartEnd,
		form,
		onChange
	]);
	const updateValue = (newValue) => {
		setInternalValue(newValue);
		onChange === null || onChange === void 0 || onChange(newValue);
	};
	const handleDateRangeChange = (dates) => {
		if (dates && dates[0] && dates[1]) {
			const days = dates[1].diff(dates[0], "day");
			let finalEndDate = dates[1];
			let finalDuration = days;
			if (days > 0) {
				updateValue({
					startDate: dates[0],
					endDate: finalEndDate,
					duration: finalDuration
				});
				form.setFieldsValue({
					dateRange: [dates[0], finalEndDate],
					duration: finalDuration
				});
			}
		}
	};
	const handleStartDateChange = (date) => {
		if (date && internalValue) {
			const currentEndDate = internalValue.endDate;
			const endTime = {
				hour: currentEndDate.hour(),
				minute: currentEndDate.minute(),
				second: currentEndDate.second(),
				millisecond: currentEndDate.millisecond()
			};
			const targetDuration = Math.min(internalValue.duration, maxDays);
			const finalEndDate = date.add(targetDuration, "day").hour(endTime.hour).minute(endTime.minute).second(endTime.second).millisecond(endTime.millisecond);
			updateValue({
				startDate: date,
				endDate: finalEndDate,
				duration: targetDuration
			});
			form.setFieldsValue({
				endDate: finalEndDate,
				duration: targetDuration
			});
		}
	};
	const handleEndDateChange = (date) => {
		if (date && internalValue) {
			const days = date.diff(internalValue.startDate, "day");
			if (days > 0) {
				updateValue({
					startDate: internalValue.startDate,
					endDate: date,
					duration: days
				});
				form.setFieldsValue({
					endDate: date,
					duration: days
				});
			}
		}
	};
	const handleDurationChange = (durationValue) => {
		if (internalValue) {
			const newEndDate = internalValue.startDate.add(durationValue, "day");
			updateValue({
				startDate: internalValue.startDate,
				endDate: newEndDate,
				duration: durationValue
			});
			if (separateStartEnd) form.setFieldsValue({ endDate: newEndDate });
			else form.setFieldsValue({ dateRange: [internalValue.startDate, newEndDate] });
		}
	};
	return /* @__PURE__ */ React.createElement(Form, {
		form,
		layout: "vertical",
		className: "multi-day-time-select-form"
	}, separateStartEnd ? /* @__PURE__ */ React.createElement("div", { className: "multi-day-time-select-row" }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: startDateLabel || locales.getText("pisell2.text.start_date"),
		name: "startDate",
		rules: [{
			required: true,
			message: startDateLabel || locales.getText("pisell2.text.start_date")
		}],
		style: { flex: 1 }
	}, /* @__PURE__ */ React.createElement(DatePicker$1, {
		inputReadOnly: true,
		allowClear: false,
		size: "large",
		style: {
			width: "100%",
			padding: 0
		},
		suffixIcon: /* @__PURE__ */ React.createElement(CalendarOutlined, null),
		value: internalValue === null || internalValue === void 0 ? void 0 : internalValue.startDate,
		onChange: handleStartDateChange,
		format: formatLocale,
		isHideCustomSelect: true,
		disabled
	})), /* @__PURE__ */ React.createElement(Form.Item, {
		label: endDateLabel || locales.getText("pisell2.text.end_date"),
		name: "endDate",
		rules: [{
			required: true,
			message: endDateLabel || locales.getText("pisell2.text.end_date")
		}],
		style: { flex: 1 }
	}, /* @__PURE__ */ React.createElement(DatePicker$1, {
		inputReadOnly: true,
		allowClear: false,
		size: "large",
		style: {
			width: "100%",
			padding: 0
		},
		suffixIcon: /* @__PURE__ */ React.createElement(CalendarOutlined, null),
		value: internalValue === null || internalValue === void 0 ? void 0 : internalValue.endDate,
		onChange: handleEndDateChange,
		format: formatLocale,
		isHideCustomSelect: true,
		disabled,
		disabledDate: (current) => {
			if (internalValue === null || internalValue === void 0 ? void 0 : internalValue.startDate) return current.isSameOrBefore(internalValue.startDate, "day");
			return false;
		}
	}))) : /* @__PURE__ */ React.createElement("div", { className: "multi-day-time-select-row" }, /* @__PURE__ */ React.createElement(Form.Item, {
		label: startDateLabel || locales.getText("pisell2.text.start_date"),
		name: "dateRange",
		rules: [{
			required: true,
			message: startDateLabel || locales.getText("pisell2.text.start_date")
		}],
		style: { flex: 1 }
	}, /* @__PURE__ */ React.createElement(Page, { isRenderPisellConfigProvider: false }, /* @__PURE__ */ React.createElement(RangePicker, {
		inputReadOnly: true,
		allowClear: false,
		size: "large",
		style: {
			width: "100%",
			padding: 0
		},
		suffixIcon: /* @__PURE__ */ React.createElement(CalendarOutlined, null),
		value: internalValue ? [internalValue.startDate, internalValue.endDate] : null,
		onChange: handleDateRangeChange,
		format: formatLocale,
		isHideCustomSelect: true,
		endDateDays: 1,
		disabled,
		disabledDate
	})))), /* @__PURE__ */ React.createElement(Form.Item, {
		label: durationLabel || locales.getText("pisell2.text.duration"),
		name: "duration",
		rules: [{
			required: true,
			message: durationLabel || locales.getText("pisell2.text.duration")
		}]
	}, /* @__PURE__ */ React.createElement(Select, {
		size: "large",
		value: internalValue === null || internalValue === void 0 ? void 0 : internalValue.duration,
		onChange: handleDurationChange,
		options: durationOptions,
		disabled
	})));
});
MultiDayTimeSelect.displayName = "MultiDayTimeSelect";
//#endregion
export { MultiDayTimeSelect as default };
