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/venueBooking/components/VenueSelection/components/DayTabs.tsx
var DayTabs_exports = {};
__export(DayTabs_exports, {
  default: () => DayTabs
});
module.exports = __toCommonJS(DayTabs_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_utils = require("@pisell/utils");
var import_context = require("../../../context");
var import_hooks = require("../../../hooks");
var import_utils2 = require("../../../utils");
function DayTabs({ onPrevWeek, onNextWeek }) {
  const symbol = (0, import_hooks.useVenueBookingSymbol)();
  const { anchorDate, setAnchorDate, setMonthCursor, viewModel, venueBookingModule, isWeekLoading } = (0, import_context.useVenueBookingContext)();
  const days = (0, import_utils2.getWeekDays)(anchorDate);
  const currentKey = (0, import_utils2.formatDateKey)(anchorDate);
  const selectedDateKeySet = (0, import_react.useMemo)(
    () => (0, import_hooks.getSelectedDateKeySet)(venueBookingModule),
    [venueBookingModule, viewModel.cartItems]
  );
  const showFewLeftRow = days.some((date) => {
    const meta = (0, import_utils2.getDateMetaFromSummary)(date, viewModel.dateSummary, symbol);
    return !meta.soldOut && meta.fewLeft;
  });
  const shouldHideTopTag = typeof window !== "undefined" && window.innerWidth < 920;
  const swipeRef = (0, import_react.useRef)({ startX: 0, startY: 0, active: false, moved: false });
  if (isWeekLoading) {
    return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-7 gap-1 select-none", "aria-busy": "true", "aria-live": "polite" }, Array.from({ length: 7 }).map((_, idx) => /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: `day-skeleton-${idx}`,
        className: "relative min-h-[56px] overflow-hidden rounded-[12px] bg-zinc-100 px-2 py-2 ring-1 ring-black/5 md:min-h-[60px] md:rounded-[16px] md:px-3 md:py-2"
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "h-2 w-8 rounded bg-zinc-200/90 md:h-2.5 md:w-10" }),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 flex items-end justify-between gap-1" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "h-3 w-5 rounded bg-zinc-200/90 md:h-4 md:w-6" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "h-2 w-8 rounded bg-zinc-200/90 md:h-2.5 md:w-10" })),
      /* @__PURE__ */ import_react.default.createElement("span", { className: "vb-skeleton-shimmer", "aria-hidden": "true" })
    )));
  }
  function handlePointerDown(e) {
    if (e.pointerType === "mouse" && e.button !== 0) return;
    swipeRef.current = { startX: e.clientX, startY: e.clientY, active: true, moved: false };
  }
  function handlePointerMove(e) {
    if (!swipeRef.current.active) return;
    const dx = e.clientX - swipeRef.current.startX;
    const dy = e.clientY - swipeRef.current.startY;
    if (Math.abs(dx) > 8 || Math.abs(dy) > 8) swipeRef.current.moved = true;
  }
  function handlePointerUp(e) {
    if (!swipeRef.current.active) return;
    const dx = e.clientX - swipeRef.current.startX;
    const dy = e.clientY - swipeRef.current.startY;
    swipeRef.current.active = false;
    if (Math.abs(dx) < 48 || Math.abs(dx) <= Math.abs(dy)) return;
    if (dx < 0) onNextWeek();
    else onPrevWeek();
  }
  function handleDateClick(date) {
    if (swipeRef.current.moved) {
      swipeRef.current.moved = false;
      return;
    }
    setAnchorDate(date);
    setMonthCursor(date.startOf("month"));
  }
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "grid grid-cols-7 gap-1 touch-pan-y select-none",
      onPointerDown: handlePointerDown,
      onPointerMove: handlePointerMove,
      onPointerUp: handlePointerUp,
      onPointerCancel: () => {
        swipeRef.current.active = false;
        swipeRef.current.moved = false;
      }
    },
    days.map((date) => {
      const key = (0, import_utils2.formatDateKey)(date);
      const active = key === currentKey;
      const meta = (0, import_utils2.getDateMetaFromSummary)(date, viewModel.dateSummary, symbol);
      const showSelectedBadge = selectedDateKeySet.has(key) && !active;
      const cardClass = meta.soldOut ? "bg-zinc-50 text-zinc-400 ring-1 ring-zinc-200" : active ? "text-white shadow-sm" : "bg-white text-zinc-800 ring-1 ring-black/8 hover:bg-zinc-50";
      const cardStyle = !meta.soldOut && active ? { backgroundColor: "var(--vb-primary)" } : void 0;
      const tagClass = active ? "bg-white/15 text-white ring-white/20" : meta.topTag === "Promo" ? "bg-emerald-50 text-emerald-700 ring-emerald-200" : "bg-zinc-100 text-zinc-600 ring-zinc-200";
      return /* @__PURE__ */ import_react.default.createElement(
        "button",
        {
          key,
          type: "button",
          onClick: () => handleDateClick(date),
          className: `relative min-w-0 cursor-pointer rounded-[12px] px-2 py-2 text-left transition md:rounded-[16px] md:px-3 md:py-2 ${showFewLeftRow ? "min-h-[66px] pb-5 md:min-h-[72px] md:pb-6" : "min-h-[56px] md:min-h-[60px]"} ${cardClass}`,
          style: cardStyle
        },
        meta.topTag && !shouldHideTopTag ? /* @__PURE__ */ import_react.default.createElement("div", { className: `pointer-events-none absolute right-1 top-1 inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:right-2 md:top-2 md:text-[10px] ${tagClass}` }, meta.topTag) : null,
        /* @__PURE__ */ import_react.default.createElement("div", { className: `pointer-events-none inline-flex max-w-full items-center gap-1 truncate text-[8px] leading-none md:text-xs ${meta.soldOut ? "text-zinc-400" : active ? "text-white/85" : "text-zinc-500"}` }, /* @__PURE__ */ import_react.default.createElement("span", { className: "truncate" }, (0, import_utils2.getWeekdayShortLabel)(date)), showSelectedBadge ? /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-check-circle", style: { fontSize: 13, color: "var(--vb-primary, #ea1018)" } }) : null),
        /* @__PURE__ */ import_react.default.createElement("div", { className: "pointer-events-none mt-1 flex w-full flex-wrap items-end justify-between gap-x-1" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-bold leading-none md:text-base ${meta.soldOut ? "line-through" : ""}` }, date.date()), /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[8px] font-semibold leading-tight md:text-[10px] lg:text-xs ${active ? "text-white/70" : "text-zinc-400"}` }, meta.soldOut ? import_utils.locales.getText("pisell2.venue.label.sold.out") || "已满" : meta.startingPrice ?? "")),
        showFewLeftRow ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `pointer-events-none absolute bottom-2 left-2 text-[10px] font-bold leading-none md:bottom-2 md:left-3 md:text-[11px] ${meta.fewLeft && !meta.soldOut ? active ? "text-white" : "" : "opacity-0"}`,
            style: meta.fewLeft && !meta.soldOut && !active ? { color: "var(--vb-primary)" } : void 0
          },
          import_utils.locales.getText("pisell2.venue.label.few.left") || "即将满"
        ) : null
      );
    })
  );
}
