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/BookingCalendarWeekView.tsx
var BookingCalendarWeekView_exports = {};
__export(BookingCalendarWeekView_exports, {
  BookingCalendarWeekView: () => BookingCalendarWeekView
});
module.exports = __toCommonJS(BookingCalendarWeekView_exports);
var import_react = __toESM(require("react"));
var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
var import_bookingCalendarConstants = require("../const/bookingCalendarConstants");
var import_calendarI18n = require("../calendarI18n");
var import_BookingCalendarStyle = require("../utils/BookingCalendarStyle");
var import_bookingCalendarViewShared = require("../bookingCalendarViewShared");
var import_BookingCalendarGroupRowHeader = require("./BookingCalendarGroupRowHeader");
function BookingCalendarWeekView({
  calendarProps,
  isLight,
  weekDays,
  bookings,
  courts,
  hourSlots,
  slotStepHours,
  visibleCourts,
  visibleCourtRows,
  isBusinessHour,
  goToDayFromCell,
  handleGridDropMove,
  openBookingDetail,
  setDraggingItem,
  setCollapsedGroups,
  overflowPopover,
  setOverflowPopover,
  overflowListModal,
  setOverflowListModal,
  overflowPanelRef
}) {
  const props = calendarProps;
  const todayKey = (0, import_bookingCalendarDateUtils.fmtDate)(/* @__PURE__ */ new Date());
  const weekDayColMinPx = 150;
  const weekGridMinWidthPx = import_bookingCalendarConstants.frozenColWidth + weekDays.length * weekDayColMinPx;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      key: `week-${(0, import_bookingCalendarDateUtils.fmtDate)(weekDays[0])}`,
      className: "flex min-h-0 flex-1 flex-col"
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "theme-panel pisell-scroll-hidden min-h-0 min-w-0 max-h-none flex-1 overflow-auto touch-pan-x touch-pan-y select-none",
        style: { overscrollBehavior: "none" }
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "grid",
          style: {
            minWidth: weekGridMinWidthPx,
            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${weekDays.length}, minmax(${weekDayColMinPx}px, 1fr))`
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "grid sticky top-0 z-50",
            style: {
              gridColumn: "1 / -1",
              gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${weekDays.length}, minmax(${weekDayColMinPx}px, 1fr))`,
              isolation: "isolate"
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: `sticky left-0 z-30 flex w-[132px] min-w-[132px] max-w-[132px] items-center px-2.5 py-3 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "theme-sticky theme-border theme-text" : "bg-[#241d40] border-zinc-800"}`
            },
            (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.headerCourtDate")
          ),
          weekDays.map((day, i) => {
            const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
            const isToday = key === todayKey;
            const dayItems = bookings.filter((b) => b.date === key);
            const fullyBooked = courts.every(
              (court) => hourSlots.filter(isBusinessHour).every(
                (h) => (0, import_bookingCalendarDateUtils.dayOccupancy)(
                  court.id,
                  key,
                  bookings,
                  hourSlots,
                  slotStepHours
                )[h]
              )
            );
            return /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                key,
                className: `relative z-20 border-b border-l px-1.5 py-2 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-border theme-text" : "border-zinc-800"} ${isToday ? isLight ? "bg-gradient-to-b from-violet-50 to-white" : "bg-gradient-to-b from-violet-950 to-[#1a1a22]" : isLight ? "theme-panel-soft" : "bg-[#1a1a22]"}`
              },
              /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  className: `text-sm leading-tight ${isLight ? "theme-text-faint" : "text-zinc-400"}`
                },
                (0, import_calendarI18n.tCal)(import_calendarI18n.CALENDAR_WEEKDAY_IDS[i])
              ),
              /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-0.5 flex justify-center" }, /* @__PURE__ */ import_react.default.createElement(
                "span",
                {
                  className: "grid h-10 w-10 place-items-center text-3xl font-semibold leading-none",
                  "aria-label": isToday ? "Today" : void 0
                },
                day.getDate()
              ))
            );
          })
        ),
        visibleCourtRows.map((row) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
          import_BookingCalendarGroupRowHeader.BookingCalendarGroupRowHeader,
          {
            isLight,
            view: "week",
            row: {
              id: row.id,
              label: row.label,
              count: row.count,
              collapsed: row.collapsed
            },
            renderResourceCell: props.renderResourceCell,
            setCollapsedGroups
          }
        ), weekDays.map((day) => {
          const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
          const groupCourts = visibleCourts.filter(
            (court) => court.type === row.label
          );
          const noRatioCell = groupCourts.length === 0;
          const total = groupCourts.length;
          let remaining = 0;
          let ratio = 0;
          if (!noRatioCell) {
            const busyCount = groupCourts.filter((court) => {
              const summary = (0, import_bookingCalendarDateUtils.courtDaySummary)(
                court.id,
                key,
                bookings,
                hourSlots,
                slotStepHours
              );
              return summary.items.length > 0;
            }).length;
            remaining = total - busyCount;
            ratio = total > 0 ? remaining / total : 0;
          }
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: `${row.id}-${key}`,
              style: { minHeight: import_bookingCalendarConstants.dayRowHeight },
              className: `flex h-full items-center justify-center border-b border-l px-1.5 py-1 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${noRatioCell ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`
            },
            noRatioCell ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs opacity-60" }, "—") : /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: `text-xs font-semibold leading-none ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
                  ratio,
                  isLight
                )}`
              },
              (0, import_calendarI18n.tCal)(
                "pisell2.recordBoard.calendar.day.freeRatio",
                {
                  remaining,
                  total
                }
              )
            )
          );
        })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] items-center border-b px-2.5 py-1.5 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-sticky theme-border" : "border-zinc-800 bg-[#1a1a22]"}`,
            style: { minHeight: import_bookingCalendarConstants.dayRowHeight }
          },
          props.renderResourceCell ? props.renderResourceCell({
            view: "week",
            row: {
              kind: "court",
              id: row.id,
              name: row.name,
              type: row.type
            },
            isLight
          }) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-rb-cal-week-resource-name min-w-0 w-full font-semibold text-[16px] leading-tight" }, row.name)
        ), weekDays.map((day) => {
          const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
          const summary = (0, import_bookingCalendarDateUtils.courtDaySummary)(
            row.id,
            key,
            bookings,
            hourSlots,
            slotStepHours
          );
          const previewItems = summary.items.slice(0, 3);
          const moreItems = summary.items.slice(3);
          const moreCount = moreItems.length;
          const showMoreTile = moreCount > 0 && previewItems.length > 0;
          return /* @__PURE__ */ import_react.default.createElement(
            "button",
            {
              key: `${row.id}-${key}`,
              onClick: () => goToDayFromCell(
                day,
                row.id,
                `week-${row.id}-${key}`
              ),
              onDragOver: (e) => e.preventDefault(),
              onDrop: (e) => {
                e.preventDefault();
                handleGridDropMove(key, row.id);
              },
              style: { minHeight: import_bookingCalendarConstants.dayRowHeight },
              className: `relative flex h-full flex-col justify-start border-b border-l p-1 text-left align-top transition outline-none ${isLight ? "theme-border" : "border-zinc-700"} ${summary.fullyBooked ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800 text-zinc-500" : summary.hasBlock ? isLight ? "bg-red-50 border-red-200" : "bg-red-950/30 border-red-800/40" : summary.occupiedHours.length > 0 ? isLight ? "bg-violet-50" : "bg-[#1c1630]" : isLight ? "theme-grid-cell" : "bg-zinc-900"}`
            },
            summary.fullyBooked ? /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: "min-h-[28px] w-full rounded-lg bg-zinc-700/70",
                "aria-hidden": true
              }
            ) : summary.items.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-full flex-col items-start gap-1" }, previewItems.map((item, idx) => {
              const isLastVisible = idx === previewItems.length - 1;
              const shrinkForMore = showMoreTile && isLastVisible;
              const layoutClassName = `rounded-lg px-2.5 py-1.5 text-xs text-left ${(0, import_BookingCalendarStyle.getGridBookingRowStateClasses)(
                item
              )} ${shrinkForMore ? "flex-1 min-w-0" : "w-full"}`;
              return /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  key: idx,
                  className: "flex w-full items-stretch gap-1.5"
                },
                props.renderMonthWeekBooking ? /* @__PURE__ */ import_react.default.createElement(
                  "div",
                  {
                    className: shrinkForMore ? "flex-1 min-w-0" : "w-full"
                  },
                  props.renderMonthWeekBooking({
                    item,
                    dateKey: key,
                    view: "week",
                    isLight,
                    layoutClassName,
                    onOpenDetail: openBookingDetail,
                    onDragStart: (it) => setDraggingItem(it),
                    draggable: false
                  })
                ) : /* @__PURE__ */ import_react.default.createElement(
                  "button",
                  {
                    type: "button",
                    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) === row.id && (overflowPopover == null ? void 0 : overflowPopover.date) === key ? overflowPanelRef : null
                  },
                  /* @__PURE__ */ import_react.default.createElement(
                    "button",
                    {
                      onMouseEnter: (e) => {
                        e.stopPropagation();
                        setOverflowPopover({
                          courtId: row.id,
                          date: key,
                          items: moreItems,
                          pinned: false
                        });
                      },
                      onClick: (e) => {
                        e.stopPropagation();
                        setOverflowPopover(null);
                        setOverflowListModal(
                          (prev) => prev && prev.scope === row.id && prev.date === key ? null : {
                            scope: row.id,
                            date: key,
                            title: (0, import_calendarI18n.tCal)(
                              "pisell2.recordBoard.calendar.overflow.listTitleAllBookings",
                              { date: key }
                            ),
                            items: summary.items.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
                  )
                )
              );
            })) : /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: `${import_bookingCalendarConstants.CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME} text-center ${isLight ? "border-[#d8d0eb] text-[#8f86a9]" : "border-zinc-700 text-zinc-500"}`,
                "aria-hidden": true
              }
            )
          );
        }))))
      )
    ))
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BookingCalendarWeekView
});
