import { jsx as s } from "react/jsx-runtime";
/* empty css                   */
/* empty css                     */
/* empty css                  */
import { classNames as f } from "./index-classNames.js";
import { datesAreDifferent as r } from "./index-date-helpers.js";
import c from "./index-moment.js";
import { useState as g, useEffect as d } from "react";
import { d as p } from "./index-_virtual10.js";
import { ComponentContainer as u } from "./index-ComponentContainer.js";
const w = (a) => {
  const {
    initialValue: i,
    view: D = "all",
    navigatorRenderer: C
  } = a, [t, m] = g({
    selection: {
      startDate: /* @__PURE__ */ new Date(),
      endDate: /* @__PURE__ */ new Date(),
      key: "selection"
    }
  }), o = (e) => {
    const n = !e.selection.startDate && !e.selection.endDate && !!t.selection.startDate && !!t.selection.endDate;
    // fo a notification if the dates are different no need to notify for each update if they are the same
    (r(e.selection.startDate, t.selection.startDate) || r(e.selection.endDate, t.selection.endDate) || // There is another case where we want selection to be undefined
    // In this case we still want to notify all the listeners
    n) && (m(e), a.onChange && a.onChange(e));
  };
  return d(() => {
    o({
      ...t
    });
  }, []), d(() => {
    const {
      startDate: e,
      endDate: n
    } = i ?? {}, l = {
      selection: {
        startDate: e ? c(e).toDate() : void 0,
        endDate: n ? c(n).toDate() : void 0,
        key: "selection"
      }
    };
    o(l);
  }, [i]), s(u, {
    className: f("DateRange-container", `date-range-view-${D}`),
    testId: "date-range-container",
    children: s(p.DateRangePicker, {
      ranges: [t.selection],
      ...a,
      onChange: (e) => {
        const n = {
          ...t,
          ...e
        };
        o(n);
      }
    })
  });
};
export {
  w as DateRange
};
