// @ts-nocheck
import React from 'react';
import { MonthGridOverflowVirtualList } from "../modal/OverflowPopover";
import { CALENDAR_WEEKDAY_IDS, tCal } from "../calendarI18n";
import { getGridBookingRowStateClasses } from "../utils/BookingCalendarStyle";
import { fmtDate, formatHourLabel } from "../utils/bookingCalendarDateUtils";
var MONTH_GRID_COLS = 7;

/** 月视图：由 BookingCalendar 传入数据与交互，本文件仅负责渲染结构 */
export function BookingCalendarMonthView(_ref) {
  var isLight = _ref.isLight,
    anchorDate = _ref.anchorDate,
    monthDays = _ref.monthDays,
    bookings = _ref.bookings,
    goToDayFromCell = _ref.goToDayFromCell,
    handleGridDropMove = _ref.handleGridDropMove,
    setDraggingItem = _ref.setDraggingItem,
    openBookingDetail = _ref.openBookingDetail,
    overflowPopover = _ref.overflowPopover,
    setOverflowPopover = _ref.setOverflowPopover,
    overflowListModal = _ref.overflowListModal,
    setOverflowListModal = _ref.setOverflowListModal,
    overflowPanelRef = _ref.overflowPanelRef,
    renderMonthWeekBooking = _ref.renderMonthWeekBooking;
  var todayKey = fmtDate(new Date());
  var weekRowCount = Math.ceil(monthDays.length / MONTH_GRID_COLS);
  return /*#__PURE__*/React.createElement("div", {
    key: "month-".concat(anchorDate.getFullYear(), "-").concat(anchorDate.getMonth()),
    className: "flex min-h-0 flex-1 flex-col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "relative flex min-h-0 flex-1 flex-col overflow-hidden"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-auto overflow-y-hidden"
  }, /*#__PURE__*/React.createElement("div", {
    className: "theme-panel flex min-h-[0] min-w-[980px] flex-1 flex-col overflow-hidden"
  }, /*#__PURE__*/React.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)]"
  }, CALENDAR_WEEKDAY_IDS.map(function (id) {
    return /*#__PURE__*/React.createElement("div", {
      key: id,
      className: "px-4 py-2.5 text-center text-sm font-medium"
    }, tCal(id));
  })), /*#__PURE__*/React.createElement("div", {
    className: "grid min-h-0 flex-1 grid-cols-7 gap-0",
    style: {
      gridTemplateRows: "repeat(".concat(weekRowCount, ", minmax(0, 1fr))")
    }
  }, monthDays.map(function (day) {
    var isToday = day.key === todayKey;
    var allItems = bookings.filter(function (b) {
      return b.date === day.key;
    });
    var dayItems = allItems.slice(0, 3);
    var moreItems = allItems.slice(3);
    var moreCount = moreItems.length;
    var showMoreTile = moreCount > 0 && dayItems.length > 0;
    return /*#__PURE__*/React.createElement("button", {
      key: day.key,
      type: "button",
      onClick: function onClick() {
        return goToDayFromCell(day.date, null, "month-".concat(day.key));
      },
      onDragOver: function onDragOver(e) {
        return e.preventDefault();
      },
      onDrop: function 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 ".concat(day.inMonth ? isLight ? 'theme-grid-cell theme-text' : 'bg-[#1a1b21]' : isLight ? 'theme-grid-muted theme-text-faint' : 'bg-[#111217] text-zinc-600')
    }, /*#__PURE__*/React.createElement("div", {
      className: "flex shrink-0 items-start justify-between gap-1 px-2 pb-1 pt-2"
    }, /*#__PURE__*/React.createElement("div", {
      className: "text-3xl font-semibold leading-none ".concat(isLight ? 'theme-text-soft' : '')
    }, /*#__PURE__*/React.createElement("span", {
      className: "grid h-10 w-10 place-items-center rounded-full leading-none ".concat(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' : undefined
    }, day.date.getDate())), /*#__PURE__*/React.createElement("div", {
      className: "flex shrink-0 gap-1 pt-0.5"
    }, day.bookingCount > 0 && /*#__PURE__*/React.createElement("span", {
      className: "h-2.5 w-2.5 rounded-full bg-violet-500"
    }), (day.blockCount > 0 || day.fullyBooked) && /*#__PURE__*/React.createElement("span", {
      className: "h-2.5 w-2.5 rounded-full bg-red-500"
    }))), /*#__PURE__*/React.createElement("div", {
      className: "min-h-0 flex-1 overflow-y-auto overscroll-y-contain px-2 pb-2"
    }, dayItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
      className: "flex flex-col gap-1.5"
    }, dayItems.map(function (item, i) {
      var isLastVisible = i === dayItems.length - 1;
      var shrinkForMore = showMoreTile && isLastVisible;
      var layoutClassName = "block rounded-md px-2 pt-1.5 pb-2 text-xs text-left ".concat(getGridBookingRowStateClasses(item), " ").concat(shrinkForMore ? 'flex-1 min-w-0' : 'w-full');
      var rowKey = item.id != null ? String(item.id) : "".concat(day.key, "-").concat(i);
      return /*#__PURE__*/React.createElement("div", {
        key: rowKey,
        className: "flex w-full items-stretch gap-2"
      }, renderMonthWeekBooking ? /*#__PURE__*/React.createElement("div", {
        className: shrinkForMore ? 'flex-1 min-w-0' : 'w-full'
      }, renderMonthWeekBooking({
        item: item,
        dateKey: day.key,
        view: 'month',
        isLight: isLight,
        layoutClassName: layoutClassName,
        onOpenDetail: openBookingDetail,
        onDragStart: function onDragStart(it) {
          return setDraggingItem(it);
        },
        draggable: item.kind !== 'block'
      })) : /*#__PURE__*/React.createElement("button", {
        type: "button",
        draggable: item.kind !== 'block',
        onDragStart: function onDragStart(e) {
          if (item.kind !== 'block') {
            e.stopPropagation();
            setDraggingItem(item);
          }
        },
        onClick: function onClick(e) {
          e.stopPropagation();
          openBookingDetail(item);
        },
        className: layoutClassName
      }, /*#__PURE__*/React.createElement("div", {
        className: "truncate"
      }, item.name), /*#__PURE__*/React.createElement("div", {
        className: "mt-1 opacity-80"
      }, formatHourLabel(item.startHour), " -", ' ', formatHourLabel(item.endHour))), shrinkForMore && /*#__PURE__*/React.createElement("div", {
        className: "relative h-[52px] w-[52px] shrink-0",
        ref: (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === 'month' && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key ? overflowPanelRef : null
      }, /*#__PURE__*/React.createElement("button", {
        type: "button",
        onMouseEnter: function onMouseEnter(e) {
          e.stopPropagation();
          setOverflowPopover({
            courtId: 'month',
            date: day.key,
            items: moreItems,
            pinned: false
          });
        },
        onClick: function onClick(e) {
          e.stopPropagation();
          setOverflowPopover(null);
          setOverflowListModal(function (prev) {
            return prev && prev.scope === 'month' && prev.date === day.key ? null : {
              scope: 'month',
              date: day.key,
              title: tCal('pisell2.recordBoard.calendar.overflow.listTitleBookings', {
                date: day.key
              }),
              items: allItems.filter(function (x) {
                return 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 || overflowPopover === void 0 ? void 0 : overflowPopover.courtId) === 'month' && (overflowPopover === null || overflowPopover === void 0 ? void 0 : overflowPopover.date) === day.key && !overflowListModal && /*#__PURE__*/React.createElement("div", {
        onMouseLeave: function onMouseLeave() {
          if (!(overflowPopover !== null && overflowPopover !== 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 ".concat(isLight ? 'theme-panel theme-border' : 'border-zinc-700 bg-[#111218]')
      }, /*#__PURE__*/React.createElement("div", {
        className: "mb-3 shrink-0 text-xs font-semibold ".concat(isLight ? 'theme-text-soft' : 'text-zinc-300')
      }, tCal('pisell2.recordBoard.calendar.overflow.bookingsForDay')), /*#__PURE__*/React.createElement("div", {
        className: "min-h-0 flex-1 overflow-hidden"
      }, /*#__PURE__*/React.createElement(MonthGridOverflowVirtualList, {
        items: overflowPopover.items,
        listWidth: 214,
        onPickItem: openBookingDetail
      })))));
    })) : null));
  }))))));
}