import { _asyncToGenerator } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { formatDateKey, getDateMetaFromSummary, getMonthDays, getMonthLabel, getWeekDays } from "../../../utils.js";
import { useVenueBookingContext } from "../../../context.js";
import dayjs from "dayjs";
import React, { useMemo } from "react";
import { locales } from "@pisell/utils";
import { Iconfont } from "@pisell/materials";
//#region src/components/venueBooking/components/VenueSelection/components/MonthPicker.tsx
/**
* 月历选择器
* 以日历网格形式展示一个月的日期，标记已选日期、今天、已售完日期
* 点击日期后更新锚点日期并关闭选择器
*/
function MonthPicker() {
	const { monthCursor, setMonthCursor, anchorDate, setAnchorDate, setMonthPickerOpen, fetchWeekData, viewModel } = useVenueBookingContext();
	const days = getMonthDays(monthCursor);
	const selectedKey = formatDateKey(anchorDate);
	const todayKey = formatDateKey(dayjs());
	const todayStart = dayjs().startOf("day");
	const knownDateRange = useMemo(() => {
		const knownDates = (viewModel.dateSummary || []).map((item) => dayjs(String((item === null || item === void 0 ? void 0 : item.date) || ""))).filter((date) => date.isValid()).sort((a, b) => a.valueOf() - b.valueOf());
		if (!knownDates.length) return null;
		return {
			minDate: knownDates[0].startOf("day"),
			maxDate: knownDates[knownDates.length - 1].startOf("day")
		};
	}, [viewModel.dateSummary]);
	/** 选中日期后：更新锚点 + 拉取该周数据 */
	function handleSelect(_x) {
		return _handleSelect.apply(this, arguments);
	}
	function _handleSelect() {
		_handleSelect = _asyncToGenerator(function* (day) {
			setAnchorDate(day);
			setMonthCursor(day.startOf("month"));
			setMonthPickerOpen(false);
			const weekDays = getWeekDays(day);
			yield fetchWeekData(formatDateKey(weekDays[0]), formatDateKey(weekDays[weekDays.length - 1]));
		});
		return _handleSelect.apply(this, arguments);
	}
	return /* @__PURE__ */ React.createElement("div", { className: "absolute right-0 top-[calc(100%+12px)] z-30 w-[320px] rounded-[24px] border border-black/6 bg-white p-4 shadow-[0_20px_60px_rgba(20,20,20,0.14)]" }, /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center justify-between" }, /* @__PURE__ */ React.createElement("button", {
		className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 hover:bg-zinc-50",
		onClick: () => setMonthCursor(monthCursor.subtract(1, "month"))
	}, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-chevron-left",
		style: { fontSize: 16 }
	})), /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-zinc-900" }, getMonthLabel(monthCursor)), /* @__PURE__ */ React.createElement("button", {
		className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 hover:bg-zinc-50",
		onClick: () => setMonthCursor(monthCursor.add(1, "month"))
	}, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-chevron-right",
		style: { fontSize: 16 }
	}))), /* @__PURE__ */ React.createElement("div", { className: "mb-2 grid grid-cols-7 gap-2 px-1 text-center text-[11px] font-bold uppercase tracking-wide text-zinc-400" }, [
		locales.getText("pisell2.venue.calendar.weekday.short.mon") || "周一",
		locales.getText("pisell2.venue.calendar.weekday.short.tue") || "周二",
		locales.getText("pisell2.venue.calendar.weekday.short.wed") || "周三",
		locales.getText("pisell2.venue.calendar.weekday.short.thu") || "周四",
		locales.getText("pisell2.venue.calendar.weekday.short.fri") || "周五",
		locales.getText("pisell2.venue.calendar.weekday.short.sat") || "周六",
		locales.getText("pisell2.venue.calendar.weekday.short.sun") || "周日"
	].map((d) => /* @__PURE__ */ React.createElement("div", { key: d }, d))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-7 gap-2" }, days.map((day, index) => {
		if (!day) return /* @__PURE__ */ React.createElement("div", {
			key: `empty-${index}`,
			className: "h-11"
		});
		const key = formatDateKey(day);
		const meta = getDateMetaFromSummary(day, viewModel.dateSummary);
		const selected = key === selectedKey;
		const isToday = key === todayKey;
		const isPastDate = day.isBefore(todayStart, "day");
		const isDisabledBySummary = !(!knownDateRange ? true : day.isBefore(knownDateRange.minDate, "day") || day.isAfter(knownDateRange.maxDate, "day")) && meta.soldOut;
		const isDisabled = isPastDate || isDisabledBySummary;
		const cellClass = isDisabled ? "bg-zinc-50 text-zinc-400 ring-1 ring-zinc-200" : selected ? "text-white shadow-sm" : isToday ? "" : "bg-[#fafafa] text-zinc-700 ring-1 ring-black/6";
		const cellStyle = selected && !meta.soldOut ? { backgroundColor: "var(--vb-primary)" } : isToday && !meta.soldOut ? {
			backgroundColor: "var(--vb-primary-light)",
			color: "var(--vb-primary)"
		} : void 0;
		return /* @__PURE__ */ React.createElement("button", {
			key,
			onClick: () => {
				if (isDisabled) return;
				handleSelect(day);
			},
			disabled: isDisabled,
			className: `h-11 rounded-2xl text-sm font-semibold transition ${cellClass}`,
			style: cellStyle
		}, /* @__PURE__ */ React.createElement("span", { className: isDisabledBySummary ? "line-through text-zinc-400" : "" }, day.date()));
	})));
}
//#endregion
export { MonthPicker as default };
