var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarMonthView.tsx
var BookingCalendarMonthView_exports = {};
__export(BookingCalendarMonthView_exports, {
  BookingCalendarMonthView: () => BookingCalendarMonthView
});
module.exports = __toCommonJS(BookingCalendarMonthView_exports);
var import_react = __toESM(require("react"));
var import_OverflowPopover = require("../modal/OverflowPopover");
var import_calendarI18n = require("../calendarI18n");
var import_BookingCalendarStyle = require("../utils/BookingCalendarStyle");
var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
var MONTH_GRID_COLS = 7;
function BookingCalendarMonthView({
  isLight,
  anchorDate,
  monthDays,
  bookings,
  goToDayFromCell,
  handleGridDropMove,
  setDraggingItem,
  openBookingDetail,
  overflowPopover,
  setOverflowPopover,
  overflowListModal,
  setOverflowListModal,
  overflowPanelRef,
  renderMonthWeekBooking
}) {
  const todayKey = (0, import_bookingCalendarDateUtils.fmtDate)(/* @__PURE__ */ new Date());
  const weekRowCount = Math.ceil(monthDays.length / MONTH_GRID_COLS);
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      key: `month-${anchorDate.getFullYear()}-${anchorDate.getMonth()}`,
      className: "flex min-h-0 flex-1 flex-col"
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-auto overflow-y-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel flex min-h-[0] min-w-[980px] flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel-alt grid shrink-0 grid-cols-7 border-b theme-border shadow-[0_6px_12px_rgba(0,0,0,0.08)]" }, import_calendarI18n.CALENDAR_WEEKDAY_IDS.map((id) => /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: id,
        className: "px-4 py-2.5 text-center text-sm font-medium"
      },
      (0, import_calendarI18n.tCal)(id)
    ))), /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "grid min-h-0 flex-1 grid-cols-7 gap-0",
        style: {
          gridTemplateRows: `repeat(${weekRowCount}, minmax(0, 1fr))`
        }
      },
      monthDays.map((day) => {
        const isToday = day.key === todayKey;
        const allItems = bookings.filter((b) => b.date === day.key);
        const dayItems = allItems.slice(0, 3);
        const moreItems = allItems.slice(3);
        const moreCount = moreItems.length;
        const showMoreTile = moreCount > 0 && dayItems.length > 0;
        return /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            key: day.key,
            type: "button",
            onClick: () => goToDayFromCell(day.date, null, `month-${day.key}`),
            onDragOver: (e) => e.preventDefault(),
            onDrop: (e) => {
              e.preventDefault();
              handleGridDropMove(day.key);
            },
            className: `flex h-full min-h-0 flex-col overflow-hidden border-r border-b theme-border text-left align-top ${day.inMonth ? isLight ? "theme-grid-cell theme-text" : "bg-[#1a1b21]" : isLight ? "theme-grid-muted theme-text-faint" : "bg-[#111217] text-zinc-600"}`
          },
          /* @__PURE__ */ import_react.default.createElement("div", { className: "flex shrink-0 items-start justify-between gap-1 px-2 pb-1 pt-2" }, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: `text-3xl font-semibold leading-none ${isLight ? "theme-text-soft" : ""}`
            },
            /* @__PURE__ */ import_react.default.createElement(
              "span",
              {
                className: `grid h-10 w-10 place-items-center rounded-full leading-none ${isToday ? isLight ? "ring-2 ring-violet-500/70 bg-violet-50" : "ring-2 ring-violet-400/60 bg-white/[0.06]" : ""}`,
                "aria-label": isToday ? "Today" : void 0
              },
              day.date.getDate()
            )
          ), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex shrink-0 gap-1 pt-0.5" }, day.bookingCount > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (day.blockCount > 0 || day.fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" }))),
          /* @__PURE__ */ import_react.default.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-y-contain px-2 pb-2" }, dayItems.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-1.5" }, dayItems.map((item, i) => {
            const isLastVisible = i === dayItems.length - 1;
            const shrinkForMore = showMoreTile && isLastVisible;
            const layoutClassName = `block rounded-md px-2 pt-1.5 pb-2 text-xs text-left ${(0, import_BookingCalendarStyle.getGridBookingRowStateClasses)(
              item
            )} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`;
            const rowKey = item.id != null ? String(item.id) : `${day.key}-${i}`;
            return /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                key: rowKey,
                className: "flex w-full items-stretch gap-2"
              },
              renderMonthWeekBooking ? /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  className: shrinkForMore ? "flex-1 min-w-0" : "w-full"
                },
                renderMonthWeekBooking({
                  item,
                  dateKey: day.key,
                  view: "month",
                  isLight,
                  layoutClassName,
                  onOpenDetail: openBookingDetail,
                  onDragStart: (it) => setDraggingItem(it),
                  draggable: item.kind !== "block"
                })
              ) : /* @__PURE__ */ import_react.default.createElement(
                "button",
                {
                  type: "button",
                  draggable: item.kind !== "block",
                  onDragStart: (e) => {
                    if (item.kind !== "block") {
                      e.stopPropagation();
                      setDraggingItem(item);
                    }
                  },
                  onClick: (e) => {
                    e.stopPropagation();
                    openBookingDetail(item);
                  },
                  className: layoutClassName
                },
                /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, item.name),
                /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 opacity-80" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(item.startHour), " -", " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(item.endHour))
              ),
              shrinkForMore && /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  className: "relative h-[52px] w-[52px] shrink-0",
                  ref: (overflowPopover == null ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover == null ? void 0 : overflowPopover.date) === day.key ? overflowPanelRef : null
                },
                /* @__PURE__ */ import_react.default.createElement(
                  "button",
                  {
                    type: "button",
                    onMouseEnter: (e) => {
                      e.stopPropagation();
                      setOverflowPopover({
                        courtId: "month",
                        date: day.key,
                        items: moreItems,
                        pinned: false
                      });
                    },
                    onClick: (e) => {
                      e.stopPropagation();
                      setOverflowPopover(null);
                      setOverflowListModal(
                        (prev) => prev && prev.scope === "month" && prev.date === day.key ? null : {
                          scope: "month",
                          date: day.key,
                          title: (0, import_calendarI18n.tCal)(
                            "pisell2.recordBoard.calendar.overflow.listTitleBookings",
                            { date: day.key }
                          ),
                          items: allItems.filter(
                            (x) => x.kind === "booking"
                          )
                        }
                      );
                    },
                    className: "flex h-[52px] w-[52px] items-center justify-center rounded-xl bg-violet-700/90 text-sm font-semibold text-white"
                  },
                  "+",
                  moreCount
                ),
                (overflowPopover == null ? void 0 : overflowPopover.courtId) === "month" && (overflowPopover == null ? void 0 : overflowPopover.date) === day.key && !overflowListModal && /* @__PURE__ */ import_react.default.createElement(
                  "div",
                  {
                    onMouseLeave: () => {
                      if (!(overflowPopover == null ? void 0 : overflowPopover.pinned))
                        setOverflowPopover(null);
                    },
                    className: `absolute right-0 top-[60px] z-20 flex min-w-[240px] max-h-[360px] flex-col rounded-xl border p-3 shadow-2xl ${isLight ? "theme-panel theme-border" : "border-zinc-700 bg-[#111218]"}`
                  },
                  /* @__PURE__ */ import_react.default.createElement(
                    "div",
                    {
                      className: `mb-3 shrink-0 text-xs font-semibold ${isLight ? "theme-text-soft" : "text-zinc-300"}`
                    },
                    (0, import_calendarI18n.tCal)(
                      "pisell2.recordBoard.calendar.overflow.bookingsForDay"
                    )
                  ),
                  /* @__PURE__ */ import_react.default.createElement("div", { className: "min-h-0 flex-1 overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement(
                    import_OverflowPopover.MonthGridOverflowVirtualList,
                    {
                      items: overflowPopover.items,
                      listWidth: 214,
                      onPickItem: openBookingDetail
                    }
                  ))
                )
              )
            );
          })) : null)
        );
      })
    ))))
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BookingCalendarMonthView
});
