import { j as t } from "../../../../_virtual/jsx-runtime.js";
import { LabelWrapper as I, Label as B } from "../../../Field/styles.js";
import { useState as s, useEffect as h } from "react";
import L from "../../../../icons/Close.js";
import { getId as k, noop as F } from "../../../../utils/index.js";
import { IconButton as V } from "../../../IconButton/index.js";
import { Modal as H } from "../../../Modal/index.js";
import { getInitialMonths as z, shouldUseSelectorsProp as E, formatInputValue as N } from "../../utils.js";
import { ActionButtons as O } from "../actionButtons/index.js";
import { Calendar as P } from "../calendar/index.js";
import { DayNameRow as Y } from "../dayNameRow/index.js";
import { Input as $ } from "../input/index.js";
import { SelectorsOld as A, Selectors as U } from "../selectors/index.js";
import { ModalContent as q, Header as G, Title as J, CalendarsWrapper as K } from "./styles.js";
function re(e) {
  const [g, d] = s(!1), [a, r] = s([
    { month: e.month, year: e.year }
  ]), [l, S] = s(), [f, R] = s(), [c, j] = s(), [m, y] = s(), [b, w] = s(0), D = k(e["data-testid"]);
  h(() => {
    r(z(e.month, e.year));
  }, [e.month, e.year]), h(() => {
    c && c.scrollIntoView();
  }, [c]);
  function u(n) {
    e.onSelectorClick(n);
  }
  h(() => {
    l && f && (c ? l.scrollTop = c.getBoundingClientRect().y - c.getBoundingClientRect().height / 2 : m && (l.scrollTop = m.getBoundingClientRect().y - m.getBoundingClientRect().height / 2 - 10));
  }, [l]), h(() => {
    l && w(
      l.clientWidth - (l.offsetWidth - l.clientWidth)
    );
  }, [l == null ? void 0 : l.offsetWidth, window.innerWidth]);
  function v() {
    e.onConfirm(), d(!1);
  }
  function T() {
    e.onDismiss(), d(!1);
  }
  function W(n) {
    const o = n.currentTarget;
    if (o.scrollTop <= 20)
      l && f && (l.scrollTop = f.getClientRects()[0].height + 20), a[0].month === 0 ? r([
        {
          month: 11,
          year: a[0].year - 1
        },
        ...a
      ]) : r([
        {
          month: a[0].month - 1,
          year: a[0].year
        },
        ...a
      ]);
    else if (o.scrollHeight - o.scrollTop <= o.clientHeight + 500) {
      const i = a.slice(-1)[0];
      i.month >= 11 ? r([
        ...a,
        {
          month: 0,
          year: i.year + 1
        }
      ]) : r([
        ...a,
        {
          month: i.month + 1,
          year: i.year
        }
      ]);
    }
  }
  function M(n, o, i, x) {
    o === 1 && R(n), e.selectedRange && x === e.selectedRange.start.getFullYear() && i === e.selectedRange.start.getMonth() && j(n);
    const C = /* @__PURE__ */ new Date();
    x === C.getFullYear() && i === C.getMonth() && y(n);
  }
  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
    e.label && /* @__PURE__ */ t.jsx(I, { disabled: e.disabled, hasLabel: !!e.label, children: /* @__PURE__ */ t.jsx(B, { "data-testid": D("label"), disabled: e.disabled, children: e.label }) }),
    /* @__PURE__ */ t.jsx(
      $,
      {
        value: e.selectedRange,
        variant: e.variant,
        placeholder: e.placeholder ?? "",
        visible: g,
        disabled: e.disabled,
        locale: e.locale,
        handleClick: () => d(!0),
        getInputLabel: e.getInputLabel
      }
    ),
    /* @__PURE__ */ t.jsx(H, { isOpen: g, onClose: F, size: "large", isLoading: !1, children: /* @__PURE__ */ t.jsxs(q, { children: [
      /* @__PURE__ */ t.jsxs(G, { width: b, children: [
        /* @__PURE__ */ t.jsxs(J, { children: [
          e.selectedRange && N(
            e.selectedRange,
            e.locale,
            e.variant
          ) || "",
          /* @__PURE__ */ t.jsx(
            V,
            {
              icon: /* @__PURE__ */ t.jsx(L, {}),
              variant: "ghost",
              size: "x-small",
              onClick: () => d(!1)
            }
          )
        ] }),
        /* @__PURE__ */ t.jsx(
          Y,
          {
            startingDay: e.startingDay,
            narrow: !0,
            locale: e.locale,
            scrollBarWidth: l ? l.offsetWidth - l.clientWidth : 0
          }
        )
      ] }),
      /* @__PURE__ */ t.jsx(
        K,
        {
          ref: (n) => n && S(n),
          onScroll: W,
          children: a.map((n, o) => /* @__PURE__ */ t.jsx(
            "div",
            {
              ref: (i) => i && M(i, o, n.month, n.year),
              children: /* @__PURE__ */ t.jsx(
                P,
                {
                  selection: e.selection,
                  selectedRange: e.selectedRange,
                  month: n.month,
                  year: n.year,
                  startingDay: e.startingDay,
                  locale: e.locale,
                  handleChange: e.handleChange,
                  eventDates: e.eventDates,
                  minDate: e.minDate,
                  maxDate: e.maxDate,
                  showSelectors: !!e.showSelectors,
                  narrow: !0,
                  visible: !0
                }
              )
            },
            `${e.month}-${o}`
          ))
        }
      ),
      e.showSelectors && e.selectedSelector && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
        A,
        {
          handleChange: u,
          defaultSelectorValues: e.defaultSelectorValues,
          customSelectors: e.customSelectors,
          selectedSelector: e.selectedSelector,
          narrow: !0
        }
      ) }),
      E(e.selectors) && e.selectedSelector && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
        U,
        {
          handleChange: u,
          selectors: e.selectors,
          selectedSelector: e.selectedSelector,
          narrow: !0
        }
      ) }),
      /* @__PURE__ */ t.jsx(
        O,
        {
          confirmText: e.confirmText,
          dismissText: e.dismissText,
          onDismiss: T,
          onConfirm: v,
          narrow: !0
        }
      )
    ] }) })
  ] });
}
export {
  re as DatePickerNarrow
};
