import { n as e, t } from "../../utils-C_mWfcFX.js";
import { t as n } from "../../a11y-CuHKgVSx.js";
import { Calendar as r } from "../calendar/index.js";
//#region src/form/date-picker/range.ts
function i(e, t, n) {
	if (t === "YYYY-MM-DD") return e.toISOString().split("T")[0] ?? "";
	let r = n ?? (typeof navigator < "u" ? navigator.language : "en-US");
	return new Intl.DateTimeFormat(r, {
		year: "numeric",
		month: "2-digit",
		day: "2-digit"
	}).format(e);
}
function a() {
	return [
		{
			label: "Last 7 days",
			getRange: () => {
				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
				return t.setDate(t.getDate() - 6), [t, e];
			}
		},
		{
			label: "Last 30 days",
			getRange: () => {
				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
				return t.setDate(t.getDate() - 29), [t, e];
			}
		},
		{
			label: "Last 90 days",
			getRange: () => {
				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
				return t.setDate(t.getDate() - 89), [t, e];
			}
		},
		{
			label: "Year to date",
			getRange: () => {
				let e = /* @__PURE__ */ new Date();
				return [new Date(e.getFullYear(), 0, 1), e];
			}
		}
	];
}
var o = class {
	el;
	inputEl;
	dropdownEl;
	inputId;
	dropdownId;
	leftCalendar = null;
	rightCalendar = null;
	config;
	startDate;
	endDate;
	pendingStart = null;
	pendingEnd = null;
	isOpen = !1;
	isDestroyed = !1;
	handleDocumentClick;
	handleInputKeydown;
	constructor(n) {
		this.config = n, this.inputId = e("cmm-daterange"), this.dropdownId = e("cmm-daterange-dropdown"), this.startDate = n.startDate ?? null, this.endDate = n.endDate ?? null, this.el = document.createElement("div"), this.el.className = this.buildRootClass();
		let r = document.createElement("div");
		r.className = "cmm-date-range__input-wrap", this.inputEl = document.createElement("input"), this.inputEl.id = this.inputId, this.inputEl.type = "text", this.inputEl.className = "cmm-date-range__input", this.inputEl.readOnly = !0, this.inputEl.placeholder = "Select date range", this.inputEl.setAttribute("role", "combobox"), this.inputEl.setAttribute("aria-haspopup", "dialog"), this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.setAttribute("aria-controls", this.dropdownId), this.inputEl.setAttribute("aria-label", "Date range"), this.updateInputDisplay(), this.inputEl.addEventListener("click", () => {
			this.isDestroyed || (this.isOpen ? this.close() : this.open());
		});
		let i = document.createElement("button");
		i.type = "button", i.className = "cmm-date-range__toggle", i.setAttribute("aria-label", "Open date range picker"), i.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M2 6.5h12M5.5 2v2M10.5 2v2\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>", i.addEventListener("click", (e) => {
			e.stopPropagation(), !this.isDestroyed && (this.isOpen ? this.close() : this.open());
		}), r.appendChild(this.inputEl), r.appendChild(i), this.el.appendChild(r), this.dropdownEl = document.createElement("div"), this.dropdownEl.id = this.dropdownId, this.dropdownEl.className = "cmm-date-range__dropdown", this.dropdownEl.setAttribute("role", "dialog"), this.dropdownEl.setAttribute("aria-modal", "false"), this.dropdownEl.setAttribute("aria-label", "Choose date range"), this.dropdownEl.style.display = "none", this.el.appendChild(this.dropdownEl), this.handleDocumentClick = (e) => {
			if (this.isDestroyed) return;
			let t = e.target;
			this.el.contains(t) || this.close();
		}, this.handleInputKeydown = (e) => {
			this.isDestroyed || e.key === "Escape" && this.isOpen && (e.preventDefault(), this.close());
		}, this.inputEl.addEventListener("keydown", this.handleInputKeydown), t(n.container).appendChild(this.el);
	}
	getRange() {
		return {
			start: this.startDate,
			end: this.endDate
		};
	}
	setRange(e, t) {
		this.startDate = e, this.endDate = t, this.updateInputDisplay(), this.syncCalendars();
	}
	open() {
		this.isOpen || this.isDestroyed || (this.isOpen = !0, this.pendingStart = this.startDate, this.pendingEnd = this.endDate, this.dropdownEl.style.display = "", this.inputEl.setAttribute("aria-expanded", "true"), this.buildDropdownContent(), this.positionDropdown(), document.addEventListener("click", this.handleDocumentClick));
	}
	close() {
		this.isOpen && (this.isOpen = !1, this.dropdownEl.style.display = "none", this.inputEl.setAttribute("aria-expanded", "false"), document.removeEventListener("click", this.handleDocumentClick));
	}
	destroy() {
		this.isDestroyed = !0, this.close(), this.inputEl.removeEventListener("keydown", this.handleInputKeydown), document.removeEventListener("click", this.handleDocumentClick), this.leftCalendar?.destroy(), this.rightCalendar?.destroy(), this.el.remove();
	}
	buildRootClass() {
		let e = ["cmm-date-range"];
		return this.config.className && e.push(this.config.className), e.join(" ");
	}
	buildDropdownContent() {
		this.dropdownEl.innerHTML = "", this.leftCalendar?.destroy(), this.rightCalendar?.destroy(), this.leftCalendar = null, this.rightCalendar = null;
		let e = document.createElement("div");
		e.className = "cmm-date-range__body";
		let t = this.config.presets ?? a(), i = document.createElement("div");
		i.className = "cmm-date-range__presets";
		for (let e of t) {
			let t = document.createElement("button");
			t.type = "button", t.className = "cmm-date-range__preset-btn", t.textContent = e.label, t.addEventListener("click", () => {
				if (this.isDestroyed) return;
				let [t, n] = e.getRange();
				this.pendingStart = t, this.pendingEnd = n, this.syncCalendars();
			}), i.appendChild(t);
		}
		e.appendChild(i);
		let o = document.createElement("div");
		o.className = "cmm-date-range__calendars";
		let s = document.createElement("div");
		s.className = "cmm-date-range__calendar-left", o.appendChild(s);
		let c = document.createElement("div");
		c.className = "cmm-date-range__calendar-right", o.appendChild(c), e.appendChild(o), this.dropdownEl.appendChild(e);
		let l = this.pendingStart ?? /* @__PURE__ */ new Date(), u = l.getFullYear(), d = l.getMonth(), f = u, p = d + 1;
		p > 11 && (p = 0, f += 1), this.leftCalendar = new r({
			container: s,
			mode: "range",
			rangeStart: this.pendingStart,
			rangeEnd: this.pendingEnd,
			minDate: this.config.minDate,
			maxDate: this.config.maxDate,
			onRangeChange: (e, t) => {
				this.pendingStart = e, this.pendingEnd = t, this.rightCalendar?.setRange(e, t);
			}
		}), this.leftCalendar.goToMonth(u, d), this.rightCalendar = new r({
			container: c,
			mode: "range",
			rangeStart: this.pendingStart,
			rangeEnd: this.pendingEnd,
			minDate: this.config.minDate,
			maxDate: this.config.maxDate,
			onRangeChange: (e, t) => {
				this.pendingStart = e, this.pendingEnd = t, this.leftCalendar?.setRange(e, t);
			}
		}), this.rightCalendar.goToMonth(f, p);
		let m = document.createElement("div");
		m.className = "cmm-date-range__footer";
		let h = document.createElement("button");
		h.type = "button", h.className = "cmm-date-range__cancel-btn", h.textContent = "Cancel", h.addEventListener("click", () => {
			this.isDestroyed || this.close();
		});
		let g = document.createElement("button");
		g.type = "button", g.className = "cmm-date-range__apply-btn", g.textContent = "Apply", g.addEventListener("click", () => {
			this.isDestroyed || (this.startDate = this.pendingStart, this.endDate = this.pendingEnd, this.updateInputDisplay(), this.config.onChange?.(this.startDate, this.endDate), this.startDate !== null && this.endDate !== null && n(`Selected range from ${this.startDate.toLocaleDateString("en-US", {
				month: "short",
				day: "numeric",
				year: "numeric"
			})} to ${this.endDate.toLocaleDateString("en-US", {
				month: "short",
				day: "numeric",
				year: "numeric"
			})}`, "polite"), this.close());
		}), m.appendChild(h), m.appendChild(g), this.dropdownEl.appendChild(m);
	}
	syncCalendars() {
		this.leftCalendar?.setRange(this.pendingStart, this.pendingEnd), this.rightCalendar?.setRange(this.pendingStart, this.pendingEnd);
	}
	updateInputDisplay() {
		let e = this.config.format ?? "YYYY-MM-DD", t = this.config.locale;
		this.startDate !== null && this.endDate !== null ? this.inputEl.value = `${i(this.startDate, e, t)} \u2014 ${i(this.endDate, e, t)}` : this.startDate === null ? this.inputEl.value = "" : this.inputEl.value = `${i(this.startDate, e, t)} \u2014 ...`;
	}
	positionDropdown() {
		let e = this.el.getBoundingClientRect(), t = window.innerHeight - e.bottom;
		t < 400 && e.top > t ? (this.dropdownEl.classList.add("cmm-date-range__dropdown--above"), this.dropdownEl.classList.remove("cmm-date-range__dropdown--below")) : (this.dropdownEl.classList.add("cmm-date-range__dropdown--below"), this.dropdownEl.classList.remove("cmm-date-range__dropdown--above"));
	}
};
//#endregion
export { o as DateRangePicker };

//# sourceMappingURL=range.js.map