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_icons = require("@ant-design/icons");
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");
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;
  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: "p-2 md:p-4 relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "theme-panel rounded-3xl border min-w-[980px] min-h-0 max-h-none flex-1 overflow-auto" }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "grid",
        style: {
          gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${weekDays.length}, minmax(150px, 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(150px, 1fr))`,
            isolation: "isolate"
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] px-3 py-4 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 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 p-3 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-border theme-text" : "border-zinc-800"} ${i >= 5 ? isLight ? "bg-violet-200" : "bg-violet-900" : isLight ? "theme-panel-soft" : "bg-[#1a1a22]"}`
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: `text-sm ${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-1 text-3xl font-semibold" }, day.getDate()),
            /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 flex items-center justify-center gap-1" }, dayItems.some((b) => b.kind === "booking") && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (dayItems.some((b) => b.kind === "block") || fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" }))
          );
        })
      ),
      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(
        "div",
        {
          className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-2.5 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "border-slate-200 bg-gradient-to-b from-slate-100 to-slate-50" : "border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]"}`
        },
        props.renderResourceCell ? props.renderResourceCell({
          view: "week",
          row: {
            kind: "group",
            id: row.id,
            label: row.label,
            count: row.count,
            collapsed: row.collapsed
          },
          isLight,
          onToggleGroup: (label) => setCollapsedGroups((prev) => ({
            ...prev,
            [label]: !prev[label]
          }))
        }) : /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            "aria-expanded": !row.collapsed,
            onClick: () => setCollapsedGroups((prev) => ({
              ...prev,
              [row.label]: !prev[row.label]
            })),
            className: `flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors ${isLight ? "hover:bg-white/60" : "hover:bg-white/[0.04] active:bg-white/[0.07]"}`
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_icons.DownOutlined,
            {
              style: { fontSize: 15 },
              className: `shrink-0 transition-transform duration-200 ${isLight ? "text-slate-500" : "text-zinc-500"} ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
              "aria-hidden": true
            }
          ),
          /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ import_react.default.createElement(
            "span",
            {
              className: `truncate text-[13px] font-semibold leading-snug ${isLight ? "text-slate-800" : "text-zinc-100"}`
            },
            row.label
          ), /* @__PURE__ */ import_react.default.createElement(
            "span",
            {
              className: `shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums ${isLight ? "bg-violet-100 text-violet-800" : "bg-zinc-800/90 text-zinc-300 ring-1 ring-zinc-600/40"}`
            },
            row.count
          ))
        )
      ), weekDays.map((day) => {
        const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
        const groupCourts = visibleCourts.filter(
          (court) => court.type === row.label
        );
        const idleCount = groupCourts.filter((court) => {
          const s = (0, import_bookingCalendarDateUtils.courtDaySummary)(
            court.id,
            key,
            bookings,
            hourSlots,
            slotStepHours
          );
          return s.occupiedHours.length === 0;
        }).length;
        const ratio = groupCourts.length > 0 ? idleCount / groupCourts.length : 0;
        return /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            key: `${row.id}-${key}`,
            className: `border-b border-l p-3 text-center ${isLight ? "theme-border theme-panel-soft" : "border-zinc-800 bg-[#151a2f]"}`
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: `text-xs font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
                ratio,
                isLight
              )}`
            },
            idleCount,
            "/",
            groupCourts.length
          )
        );
      })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: `sticky left-0 z-20 w-[132px] min-w-[132px] max-w-[132px] border-b px-3 py-3 align-top shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-sticky theme-border" : "border-zinc-800 bg-[#1a1a22]"}`
        },
        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: "font-semibold text-[16px] leading-tight break-all" }, 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);
            },
            className: `relative flex flex-col justify-start min-h-[148px] border-b border-l p-3 text-left align-top transition ${isLight ? "theme-border" : ""} ${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 hover:bg-violet-100/80" : "bg-[#1c1630] hover:bg-[#241c3f]" : isLight ? "theme-grid-cell hover:bg-violet-50/60" : "bg-zinc-900 hover:bg-zinc-800"}`
          },
          /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute left-3 top-3 text-[13px] text-zinc-400" }, key),
          /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute right-3 top-3 flex gap-1" }, summary.occupiedHours.length > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-violet-500" }), (summary.hasBlock || summary.fullyBooked) && /* @__PURE__ */ import_react.default.createElement("span", { className: "h-2.5 w-2.5 rounded-full bg-red-500" })),
          summary.fullyBooked ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-8 rounded-lg bg-zinc-700/70 px-2 py-1 text-xs" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.fullyBooked")) : summary.items.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-8 flex flex-col items-start gap-1.5 w-full" }, previewItems.map((item, idx) => {
            const isLastVisible = idx === previewItems.length - 1;
            const shrinkForMore = showMoreTile && isLastVisible;
            const layoutClassName = `rounded-lg px-3 py-2 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-2"
              },
              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: "mt-8 rounded-lg border border-dashed border-zinc-700 px-2 py-2 text-xs text-zinc-500" }, (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.week.available"))
        );
      }))))
    )))
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BookingCalendarWeekView
});
