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/ResourceWall/VenueWallCard.tsx
var VenueWallCard_exports = {};
__export(VenueWallCard_exports, {
  VenueWallCard: () => VenueWallCard
});
module.exports = __toCommonJS(VenueWallCard_exports);
var import_react = __toESM(require("react"));
var import_locales = require("../../../../locales");
var import_NoteTicker = require("./NoteTicker");
var import_resourceWallConstants = require("./resourceWallConstants");
var import_venueWallCardPresentation = require("./venueWallCardPresentation");
var import_venueWallUtils = require("./venueWallUtils");
var import_VenueWallCard = require("./VenueWallCard.less");
var SHOW_RESOURCE_TYPE_LABEL = false;
function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false) {
  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
    min: value ?? 0,
    at: Date.now()
  }));
  (0, import_react.useEffect)(() => {
    setEpoch({ min: value ?? 0, at: Date.now() });
  }, [resourceId, value]);
  const elapsedMs = now - epoch.at;
  const precise = epoch.min - elapsedMs / 6e4;
  const drifted = epoch.min - Math.floor(elapsedMs / 6e4);
  const whole = allowNegative ? drifted : Math.max(0, drifted);
  const preciseClamped = allowNegative ? precise : Math.max(0, precise);
  return { whole, precise: preciseClamped };
}
function useDriftAccumulatedMinutesFromEpoch(value, resourceId, now) {
  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
    min: value ?? 0,
    at: Date.now()
  }));
  (0, import_react.useEffect)(() => {
    setEpoch({ min: value ?? 0, at: Date.now() });
  }, [resourceId, value]);
  return epoch.min + Math.floor((now - epoch.at) / 6e4);
}
var NEXT_LIST_PLACEHOLDER_VALUES = /* @__PURE__ */ new Set([
  "",
  "-",
  "–",
  "—",
  "―",
  "—",
  "–"
]);
function nextListFieldIsMeaningful(raw) {
  const s = String(raw ?? "").trim();
  if (!s) return false;
  return !NEXT_LIST_PLACEHOLDER_VALUES.has(s);
}
var DEFAULT_OCCUPIED = "#6f4ae6";
var DEFAULT_AVAILABLE = "#94a3b8";
function VenueWallCardInner({
  card,
  wallNowMs,
  boardingSoonBeforeMin = 10,
  occupiedCardColor = DEFAULT_OCCUPIED,
  availableCardColor = DEFAULT_AVAILABLE,
  statusToneMap: statusToneMapProp,
  appearance = "light"
}) {
  var _a;
  const toneMap = statusToneMapProp ?? (0, import_venueWallUtils.getVenueWallStatusToneMap)();
  const isDark = appearance === "dark";
  const idleMain = isDark ? "#e2e8f0" : "#0f172a";
  const idleSub = isDark ? "#94a3b8" : "#94a3b8";
  const {
    whole: liveRemainingMin,
    precise: liveRemainingPreciseMin
  } = useDriftMinutesFromEpoch(
    card.remainingMin,
    card.resourceId,
    wallNowMs,
    true
  );
  const { whole: liveStartsInMin } = useDriftMinutesFromEpoch(
    card.startsInMin,
    card.resourceId,
    wallNowMs,
    false
  );
  const liveLateMin = useDriftAccumulatedMinutesFromEpoch(
    card.lateMin,
    card.resourceId,
    wallNowMs
  );
  const presentation = (0, import_react.useMemo)(
    () => (0, import_venueWallCardPresentation.buildVenueWallCardPresentation)({
      card,
      toneMap,
      wallNowMs,
      liveRemainingMin,
      liveRemainingPreciseMin,
      liveStartsInMin,
      liveLateMin,
      boardingSoonBeforeMin,
      idleMain,
      idleSub,
      occupiedCardColor,
      availableCardColor
    }),
    [
      card,
      toneMap,
      wallNowMs,
      liveRemainingMin,
      liveRemainingPreciseMin,
      liveStartsInMin,
      liveLateMin,
      boardingSoonBeforeMin,
      idleMain,
      idleSub,
      occupiedCardColor,
      availableCardColor
    ]
  );
  const {
    floorLikeStatus,
    headerStatusKey,
    headerStatusLabel,
    headerStatusColor,
    cardVariant,
    mainColor,
    subColor,
    surfaceAccentColor,
    primaryEmphasisLine,
    primaryEmphasisColor,
    timeRangeLine,
    contactLine,
    showProgress,
    progress,
    progressColor,
    showEndingSoonMarquee,
    marqueeText,
    marqueeColor,
    marqueeShellBackground
  } = presentation;
  const nextItem = (_a = card.nextList) == null ? void 0 : _a[0];
  const nextTimeMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.time) : false;
  const nextContactMeaningful = nextItem ? nextListFieldIsMeaningful(nextItem.booking) : false;
  const hasNextWallSection = Boolean(
    nextItem && (nextTimeMeaningful || nextContactMeaningful)
  );
  const showNextSection = hasNextWallSection && !card.wallUseNextLabelHideNextRow;
  const useNextAsCurrentTitle = Boolean(card.wallUseNextLabelHideNextRow);
  const nextTimeSoloLarge = nextTimeMeaningful && !nextContactMeaningful;
  const cardBg = cardVariant === "occupied" ? `linear-gradient(180deg, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.96)} 0%, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.88)} 100%)` : (0, import_venueWallUtils.alphaColor)(
    surfaceAccentColor,
    floorLikeStatus === "reserved" ? 0.06 : 0.03
  );
  const cardBorder = cardVariant === "occupied" ? (0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.5) : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.18);
  const moduleBorder = cardVariant === "occupied" ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.2);
  const currentPanelBg = cardVariant === "occupied" ? "rgba(255,255,255,0.16)" : (0, import_venueWallUtils.alphaColor)(
    surfaceAccentColor,
    floorLikeStatus === "reserved" ? 0.18 : 0.2
  );
  const currentSectionInk = cardVariant === "occupied" ? "#ffffff" : floorLikeStatus === "reserved" ? (0, import_venueWallUtils.alphaColor)(idleMain, 0.78) : subColor;
  const nextPanelBg = cardVariant === "occupied" ? "rgba(255,255,255,0.04)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, floorLikeStatus === "reserved" ? 0.1 : 0.08);
  const nextSectionInk = cardVariant === "occupied" ? subColor : floorLikeStatus === "reserved" ? (0, import_venueWallUtils.alphaColor)(idleMain, 0.78) : subColor;
  const resourceTitleLabel = String(card.resource ?? "").trim();
  const resourceTypeLabel = String(card.area ?? "").trim();
  const headerStatusClass = `pisell-resource-wall-card__header-status--${headerStatusKey}`;
  const headerStatusStyle = (() => {
    if (headerStatusKey === "empty") {
      return { color: headerStatusColor };
    }
    if (headerStatusKey === "reserved" || headerStatusKey === "late") {
      return { color: headerStatusColor };
    }
    if (headerStatusKey === "expired") {
      return { color: "#ffffff", background: headerStatusColor };
    }
    return { color: "#ffffff" };
  })();
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-resource-wall-card",
      style: {
        background: cardBg,
        borderColor: cardBorder,
        boxShadow: isDark ? "0 18px 48px rgba(0,0,0,0.35)" : "0 18px 48px rgba(15,23,42,0.06)"
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__scale-root" }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `pisell-resource-wall-card__grid ${showNextSection ? "pisell-resource-wall-card__grid--with-next" : "pisell-resource-wall-card__grid--no-next"}`
      },
      /* @__PURE__ */ import_react.default.createElement("header", { className: "pisell-resource-wall-card__header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__header-main" }, SHOW_RESOURCE_TYPE_LABEL && resourceTypeLabel ? /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-resource-wall-card__tier2 pisell-resource-wall-card__header-type",
          style: { color: subColor }
        },
        resourceTypeLabel
      ) : null, /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-resource-wall-card__header-name",
          style: { color: mainColor }
        },
        resourceTitleLabel || " "
      )), /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: `pisell-resource-wall-card__header-status ${headerStatusClass}`,
          style: headerStatusStyle
        },
        headerStatusLabel
      )),
      /* @__PURE__ */ import_react.default.createElement(
        "section",
        {
          className: `pisell-resource-wall-card__panel${cardVariant === "occupied" ? " pisell-resource-wall-card__panel--occupied-current" : floorLikeStatus === "reserved" ? " pisell-resource-wall-card__panel--reserved-current" : ""}`,
          style: {
            borderColor: cardVariant === "occupied" ? "rgba(255,255,255,0.28)" : moduleBorder,
            background: currentPanelBg,
            minHeight: 0
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `pisell-resource-wall-card__section-title${cardVariant === "occupied" ? " pisell-resource-wall-card__section-title--occupied-current" : floorLikeStatus === "reserved" ? " pisell-resource-wall-card__section-title--reserved-current" : ""}`,
            style: { color: currentSectionInk }
          },
          (0, import_locales.getText)(
            useNextAsCurrentTitle ? "pisell-resource-wall-card-label-next" : "pisell-resource-wall-card-label-current"
          )
        ),
        /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-main" }, timeRangeLine ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__tier2",
            style: { color: currentSectionInk }
          },
          timeRangeLine
        ) : null, contactLine ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__tier2",
            style: { color: currentSectionInk }
          },
          contactLine
        ) : null), primaryEmphasisLine || showProgress || showEndingSoonMarquee && marqueeText || floorLikeStatus === "empty" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-resource-wall-card__current-footer" }, floorLikeStatus === "empty" ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier2",
            style: { color: currentSectionInk }
          },
          (0, import_locales.getText)("pisell-resource-wall-card-current-not-in-use")
        ) : null, primaryEmphasisLine ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__current-footer-emphasis pisell-resource-wall-card__tier1",
            style: { color: primaryEmphasisColor }
          },
          primaryEmphasisLine
        ) : null, showProgress ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__progress-wrap",
            style: {
              background: cardVariant === "occupied" ? "rgba(255,255,255,0.14)" : "rgba(148,163,184,0.18)"
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "pisell-resource-wall-card__progress-fill",
              style: {
                width: `${progress}%`,
                background: progressColor
              }
            }
          )
        ) : null, showEndingSoonMarquee && marqueeText ? /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-resource-wall-card__marquee-shell",
            style: {
              background: marqueeShellBackground
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "pisell-resource-wall-card__tier3",
              style: { color: marqueeColor }
            },
            /* @__PURE__ */ import_react.default.createElement(
              import_NoteTicker.NoteTicker,
              {
                text: marqueeText,
                color: marqueeColor,
                duration: 24,
                shouldMarquee: marqueeText.length > import_resourceWallConstants.RESOURCE_WALL_NOTE_MARQUEE_MIN_CHARS
              }
            )
          )
        ) : null) : null)
      ),
      showNextSection ? /* @__PURE__ */ import_react.default.createElement(
        "section",
        {
          className: `pisell-resource-wall-card__panel${floorLikeStatus === "reserved" ? " pisell-resource-wall-card__panel--reserved-next" : ""}`,
          style: {
            borderColor: moduleBorder,
            background: nextPanelBg,
            minHeight: 0
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `pisell-resource-wall-card__section-title${floorLikeStatus === "reserved" ? " pisell-resource-wall-card__section-title--reserved-next" : ""}`,
            style: { color: nextSectionInk }
          },
          (0, import_locales.getText)("pisell-resource-wall-card-label-next")
        ),
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `pisell-resource-wall-card__next-stack${nextContactMeaningful && nextTimeMeaningful ? " pisell-resource-wall-card__next-stack--both-lines" : ""}`
          },
          nextContactMeaningful && nextItem ? /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "pisell-resource-wall-card__tier2",
              style: { color: nextSectionInk }
            },
            String(nextItem.booking).trim()
          ) : null,
          nextTimeMeaningful && nextItem ? /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: nextTimeSoloLarge ? "pisell-resource-wall-card__next-time-solo" : "pisell-resource-wall-card__tier2",
              style: { color: nextSectionInk }
            },
            String(nextItem.time).trim()
          ) : null
        )
      ) : null
    ))
  );
}
var VenueWallCard = import_react.default.memo(VenueWallCardInner);
VenueWallCard.displayName = "VenueWallCard";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  VenueWallCard
});
