import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useState, useLayoutEffect, useCallback } from "react";
import moment from "moment";
import { DayPickerRangeController } from "react-dates";
import "../../node_modules/react-dates/lib/initialize.js";
import { ShowMonthYearSelect } from "../DatePicker/showMonthYearSelect.js";
import { Portal } from "../Portal/index.js";
import { DateRangePickerCustom } from "./dateRangePickerCustom.js";
import { DateRangePickerFooter } from "./dateRangePickerFooter.js";
import { calculatePosition, formatMomentDate, setStartDateOffset, setEndDateOffset } from "./utils.js";
/* empty css                                                     */
function DateRangePickerDropdown({
  dropDownContainerRef,
  withPortal,
  portalContainer = typeof document !== "undefined" ? document.body : void 0,
  containerRef,
  onDatesChange,
  onFocusChange,
  focusedInput,
  startDate,
  endDate,
  showWeekNumbers,
  selectedRange,
  selectedDaysNumber,
  handleResetDates,
  handleCancelDates,
  onSecondaryButtonClick,
  tertiaryButtonProps,
  handleApplyDates,
  primaryButtonProps,
  showRangeSelector,
  handleRangeSelectorChange,
  showMonthYearSelect,
  customYears,
  customWeekNumberData,
  suppressClickOnWeekNumber,
  setIsOpen,
  startDateOffset: startDateOffsetProp,
  endDateOffset: endDateOffsetProp,
  hasInputErrors,
  portalClassName
}) {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
    offsetHeight: 0,
    offsetWidth: 0,
    left: 0,
    right: "auto",
    bottom: void 0,
    top: void 0
  });
  const [customPosition, setCustomPosition] = useState({
    left: 0,
    right: "auto"
  });
  useLayoutEffect(() => {
    if (withPortal && containerRef.current) {
      const scrollY = typeof window !== "undefined" ? window.scrollY || document.documentElement.scrollTop : 0;
      const {
        x,
        y,
        height: offsetHeight,
        width: offsetWidth
      } = containerRef.current.getBoundingClientRect();
      calculatePosition({ containerRef, setCustomPosition, showRangeSelector });
      setPosition((prev) => ({
        ...prev,
        x,
        y: y + scrollY,
        offsetHeight,
        offsetWidth
      }));
    } else if (!withPortal && containerRef.current && dropDownContainerRef.current) {
      calculatePosition({ containerRef, setCustomPosition, showRangeSelector });
    }
  }, [withPortal, containerRef, dropDownContainerRef, showRangeSelector]);
  const renderDayContents = useCallback(
    (momentInstance, modifiers) => {
      let content = null;
      if (showWeekNumbers && modifiers.has("first-day-of-week")) {
        if (customWeekNumberData && Array.isArray(customWeekNumberData)) {
          const formatted = formatMomentDate(momentInstance);
          const weekData = customWeekNumberData.find((w) => w.calendar_week_start_date === formatted);
          content = /* @__PURE__ */ jsxs(
            "span",
            {
              className: `CalendarDayWeekNumber ${suppressClickOnWeekNumber ? "suppress-click-on-week-number" : ""}`,
              children: [
                "W",
                (weekData == null ? void 0 : weekData.calendar_year_week) ?? ""
              ]
            }
          );
        } else {
          const startOfMonth = momentInstance.clone().startOf("month");
          const weekNumber = Math.ceil((momentInstance.date() - 1 + startOfMonth.day()) / 7);
          content = /* @__PURE__ */ jsxs(
            "span",
            {
              className: `CalendarDayWeekNumber ${suppressClickOnWeekNumber ? "suppress-click-on-week-number" : ""}`,
              children: [
                "W",
                weekNumber + 1
              ]
            }
          );
        }
      }
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        content,
        /* @__PURE__ */ jsx("span", { className: "CalendarDayNumber", children: momentInstance.format("D") })
      ] });
    },
    [showWeekNumbers, customWeekNumberData, suppressClickOnWeekNumber]
  );
  const startOffsetFn = startDateOffsetProp ?? (selectedRange === "custom" ? void 0 : (day) => setStartDateOffset(selectedRange, day));
  const endOffsetFn = endDateOffsetProp ?? (selectedRange === "custom" ? void 0 : (day) => setEndDateOffset(selectedRange, day));
  const dropdownContent = /* @__PURE__ */ jsxs(
    "div",
    {
      ref: dropDownContainerRef,
      className: `impact-dateRangePicker-dropdown-container ${showRangeSelector ? "showRangeSelector" : ""}`,
      style: customPosition,
      children: [
        /* @__PURE__ */ jsxs("div", { className: `dateRangePicker-left-container ${showWeekNumbers ? "showWeekNumbers" : ""}`, children: [
          /* @__PURE__ */ jsx(
            DayPickerRangeController,
            {
              hideKeyboardShortcutsPanel: true,
              daySize: 26,
              endDate,
              endDateOffset: endOffsetFn,
              focusedInput,
              horizontalMonthPadding: showWeekNumbers ? 16 : 12,
              initialVisibleMonth: () => startDate ?? endDate ?? moment(),
              numberOfMonths: 2,
              renderDayContents: showWeekNumbers ? renderDayContents : void 0,
              renderMonthElement: showMonthYearSelect ? ({
                month,
                onMonthSelect,
                onYearSelect
              }) => /* @__PURE__ */ jsx(
                ShowMonthYearSelect,
                {
                  customYears,
                  month,
                  onMonthSelect,
                  onYearSelect
                }
              ) : void 0,
              startDate,
              startDateOffset: startOffsetFn,
              onDatesChange,
              onFocusChange
            },
            "date-range-picker-controller"
          ),
          /* @__PURE__ */ jsx(
            DateRangePickerFooter,
            {
              handleApplyDates,
              handleCancelDates,
              handleResetDates,
              hasInputErrors,
              primaryButtonProps,
              selectedDaysNumber,
              tertiaryButtonProps,
              onSecondaryButtonClick
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "dateRangePicker-right-container", children: showRangeSelector && /* @__PURE__ */ jsx(
          DateRangePickerCustom,
          {
            handleRangeSelectorChange,
            selectedRange
          }
        ) })
      ]
    }
  );
  if (withPortal && portalContainer) {
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
        "div",
        {
          className: `impact-portal-container ${portalClassName ?? ""}`.trim(),
          style: {
            top: position.y ?? position.top,
            left: position.x ?? position.left,
            bottom: position.bottom,
            right: position.right,
            width: position.offsetWidth ? `${position.offsetWidth}px` : void 0
          },
          children: dropdownContent
        }
      ) }),
      /* @__PURE__ */ jsx(
        "div",
        {
          "aria-hidden": true,
          className: "ia-select-container-v3-blanket",
          onClick: () => {
            setIsOpen(false);
          }
        }
      )
    ] });
  }
  return dropdownContent;
}
export {
  DateRangePickerDropdown
};
