import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useState, useLayoutEffect, useCallback } from "react";
import moment from "moment";
import { DayPickerSingleDateController } from "react-dates";
import "../../node_modules/react-dates/lib/initialize.js";
import { Portal } from "../Portal/index.js";
import { DatePickerFooter } from "./datePickerFooter.js";
import { ShowMonthYearSelect } from "./showMonthYearSelect.js";
/* empty css                                                     */
function DatePickerDropdown({
  onDatesChange,
  focused,
  setFocused,
  selectedDate,
  setSelectedDate,
  showWeekNumbers,
  primaryButtonProps,
  secondaryButtonProps,
  tertiaryButtonProps,
  onPrimaryButtonClick,
  onSecondaryButtonClick,
  onTertiaryButtonClick,
  setIsOpen,
  withPortal,
  portalContainer = typeof document !== "undefined" ? document.body : void 0,
  containerRef,
  showMonthYearSelect,
  customYears,
  minDate,
  maxDate,
  isOutsideRange
}) {
  const [position, setPosition] = useState({ x: 0, y: 0, offsetHeight: 0, offsetWidth: 0 });
  useLayoutEffect(() => {
    if (containerRef.current) {
      const scrollY = typeof window !== "undefined" ? window.scrollY || document.documentElement.scrollTop : 0;
      const {
        x,
        y,
        height: offsetHeight,
        width: offsetWidth
      } = containerRef.current.getBoundingClientRect();
      setPosition({ x, y: y + scrollY, offsetHeight, offsetWidth });
    }
  }, [containerRef]);
  const handleDateChange = useCallback(
    (date) => {
      if (date) {
        onDatesChange(moment(date));
      } else {
        onDatesChange(null);
      }
    },
    [onDatesChange]
  );
  const renderDayContents = useCallback(
    (momentInstance, modifiers) => {
      const startOfMonth = momentInstance.clone().startOf("month");
      const weekNumber = Math.ceil((momentInstance.date() - 1 + startOfMonth.day()) / 7);
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        showWeekNumbers && modifiers.has("first-day-of-week") && /* @__PURE__ */ jsxs("span", { className: "CalendarDayWeekNumber", children: [
          "W",
          weekNumber + 1
        ] }),
        /* @__PURE__ */ jsx("span", { className: "CalendarDayNumber", children: momentInstance.format("D") })
      ] });
    },
    [showWeekNumbers]
  );
  const currentDate = selectedDate ? moment(selectedDate) : null;
  const renderCalendar = () => /* @__PURE__ */ jsx(
    DayPickerSingleDateController,
    {
      hideKeyboardShortcutsPanel: true,
      date: currentDate,
      daySize: 26,
      focused,
      horizontalMonthPadding: showWeekNumbers ? 24 : 12,
      initialMonth: currentDate ?? moment(),
      isOutsideRange,
      renderDayContents: showWeekNumbers ? renderDayContents : void 0,
      renderMonthElement: showMonthYearSelect ? ({
        month,
        onMonthSelect,
        onYearSelect
      }) => /* @__PURE__ */ jsx(
        ShowMonthYearSelect,
        {
          customYears,
          maxDate: maxDate ?? void 0,
          minDate: minDate ?? void 0,
          month,
          onMonthSelect,
          onYearSelect
        }
      ) : void 0,
      onDateChange: handleDateChange,
      onFocusChange: () => {
        setFocused(true);
      }
    },
    `calendar-${withPortal ? "portal" : "inline"}-${focused ? "focused" : "unfocused"}`
  );
  const dropdownContent = /* @__PURE__ */ jsxs(
    "div",
    {
      className: `impact-date-picker-dropdown-container ${showWeekNumbers ? "showWeekNumbers" : ""}`,
      children: [
        renderCalendar(),
        /* @__PURE__ */ jsx(
          DatePickerFooter,
          {
            primaryButtonProps,
            secondaryButtonProps,
            setFocused,
            setIsOpen,
            setSelectedDate,
            tertiaryButtonProps,
            onPrimaryButtonClick,
            onSecondaryButtonClick,
            onTertiaryButtonClick
          }
        )
      ]
    }
  );
  if (withPortal && portalContainer) {
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
        "div",
        {
          className: "impact-portal-container",
          style: {
            top: position.y,
            left: position.x,
            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 {
  DatePickerDropdown
};
