import { n as e, t } from "../../utils-C_mWfcFX.js";
import { t as n } from "../../a11y-CuHKgVSx.js";
//#region src/form/date-picker/time.ts
function r(e) {
	return String(e).padStart(2, "0");
}
var i = class {
	el;
	timerId;
	config;
	hours;
	minutes;
	seconds;
	isPM = !1;
	isDestroyed = !1;
	hourCol;
	minuteCol;
	secondCol = null;
	periodCol = null;
	handleKeydown;
	constructor(n) {
		this.config = n, this.timerId = e("cmm-timepicker");
		let r = n.value ?? {
			hours: 0,
			minutes: 0,
			seconds: 0
		};
		this.hours = r.hours, this.minutes = r.minutes, this.seconds = r.seconds ?? 0, n.use24Hour !== !0 && (this.isPM = this.hours >= 12, this.hours > 12 && (this.hours -= 12), this.hours === 0 && (this.hours = 12)), this.el = document.createElement("div"), this.el.className = this.buildRootClass(), this.el.id = this.timerId, this.el.setAttribute("role", "group"), this.el.setAttribute("aria-label", "Time picker"), this.buildColumns(), this.handleKeydown = (e) => {
			this.isDestroyed || this.onKeydown(e);
		}, this.el.addEventListener("keydown", this.handleKeydown), t(n.container).appendChild(this.el);
	}
	getValue() {
		let e = this.hours;
		return this.config.use24Hour !== !0 && (this.isPM && e < 12 && (e += 12), !this.isPM && e === 12 && (e = 0)), {
			hours: e,
			minutes: this.minutes,
			seconds: this.seconds
		};
	}
	setValue(e) {
		this.hours = e.hours, this.minutes = e.minutes, this.seconds = e.seconds ?? 0, this.config.use24Hour !== !0 && (this.isPM = this.hours >= 12, this.hours > 12 && (this.hours -= 12), this.hours === 0 && (this.hours = 12)), this.updateColumnHighlights(), this.emitChange();
	}
	destroy() {
		this.isDestroyed = !0, this.el.removeEventListener("keydown", this.handleKeydown), this.el.remove();
	}
	buildRootClass() {
		let e = ["cmm-time-picker"];
		return this.config.className && e.push(this.config.className), e.join(" ");
	}
	buildColumns() {
		let e = this.config.use24Hour === !0, t = e ? 23 : 12, n = e ? 0 : 1;
		if (this.hourCol = this.buildColumn("Hours", n, t, this.hours, (e) => {
			this.hours = e, this.emitChange();
		}), this.el.appendChild(this.hourCol), this.el.appendChild(this.buildSeparator()), this.minuteCol = this.buildColumn("Minutes", 0, 59, this.minutes, (e) => {
			this.minutes = e, this.emitChange();
		}), this.el.appendChild(this.minuteCol), this.config.showSeconds !== !1 && (this.el.appendChild(this.buildSeparator()), this.secondCol = this.buildColumn("Seconds", 0, 59, this.seconds, (e) => {
			this.seconds = e, this.emitChange();
		}), this.el.appendChild(this.secondCol)), !e) {
			this.periodCol = document.createElement("div"), this.periodCol.className = "cmm-time-picker__column cmm-time-picker__period", this.periodCol.setAttribute("role", "listbox"), this.periodCol.setAttribute("aria-label", "Period"), this.periodCol.tabIndex = 0;
			for (let e of ["AM", "PM"]) {
				let t = document.createElement("button");
				t.type = "button", t.className = "cmm-time-picker__item", t.setAttribute("role", "option"), t.textContent = e, t.setAttribute("data-value", e), (e === "PM" ? this.isPM : !this.isPM) ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
					this.isDestroyed || (this.isPM = e === "PM", this.updatePeriodHighlight(), this.emitChange());
				}), this.periodCol.appendChild(t);
			}
			this.el.appendChild(this.periodCol);
		}
	}
	buildColumn(e, t, n, i, a) {
		let o = document.createElement("div");
		o.className = "cmm-time-picker__column", o.setAttribute("role", "listbox"), o.setAttribute("aria-label", e), o.tabIndex = 0;
		for (let e = t; e <= n; e++) {
			let t = document.createElement("button");
			t.type = "button", t.className = "cmm-time-picker__item", t.setAttribute("role", "option"), t.textContent = r(e), t.setAttribute("data-value", String(e)), e === i ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
				this.isDestroyed || (this.clearColumnSelection(o), t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true"), a(e), t.scrollIntoView({ block: "nearest" }));
			}), o.appendChild(t);
		}
		return requestAnimationFrame(() => {
			o.querySelector(".cmm-time-picker__item--selected")?.scrollIntoView({ block: "center" });
		}), o;
	}
	buildSeparator() {
		let e = document.createElement("span");
		return e.className = "cmm-time-picker__separator", e.textContent = ":", e.setAttribute("aria-hidden", "true"), e;
	}
	clearColumnSelection(e) {
		let t = e.querySelectorAll(".cmm-time-picker__item");
		for (let e of t) e.classList.remove("cmm-time-picker__item--selected"), e.setAttribute("aria-selected", "false");
	}
	updateColumnHighlights() {
		this.selectValueInColumn(this.hourCol, this.hours), this.selectValueInColumn(this.minuteCol, this.minutes), this.secondCol !== null && this.selectValueInColumn(this.secondCol, this.seconds), this.periodCol !== null && this.updatePeriodHighlight();
	}
	selectValueInColumn(e, t) {
		this.clearColumnSelection(e);
		let n = e.querySelector(`[data-value="${String(t)}"]`);
		n !== null && (n.classList.add("cmm-time-picker__item--selected"), n.setAttribute("aria-selected", "true"), n.scrollIntoView({ block: "center" }));
	}
	updatePeriodHighlight() {
		if (this.periodCol === null) return;
		let e = this.periodCol.querySelectorAll(".cmm-time-picker__item");
		for (let t of e) (t.getAttribute("data-value") === "PM" ? this.isPM : !this.isPM) ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : (t.classList.remove("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "false"));
	}
	emitChange() {
		let e = this.getValue();
		this.config.onChange?.(e);
	}
	onKeydown(e) {
		let t = e.target.closest(".cmm-time-picker__column");
		if (t === null) return;
		let r = Array.from(t.querySelectorAll(".cmm-time-picker__item")), i = r.findIndex((e) => e.classList.contains("cmm-time-picker__item--selected")), a = i, o = !0;
		switch (e.key) {
			case "ArrowUp":
				a = i > 0 ? i - 1 : r.length - 1;
				break;
			case "ArrowDown":
				a = i < r.length - 1 ? i + 1 : 0;
				break;
			case "PageUp":
				a = Math.max(0, i - 5);
				break;
			case "PageDown":
				a = Math.min(r.length - 1, i + 5);
				break;
			case "Home":
				a = 0;
				break;
			case "End":
				a = r.length - 1;
				break;
			default: o = !1;
		}
		if (o && a !== i) {
			e.preventDefault();
			let i = r[a];
			if (i !== void 0) {
				i.click();
				let e = i.textContent;
				n(`${t.getAttribute("aria-label") ?? "Value"}: ${e}`, "polite");
			}
		}
	}
};
//#endregion
export { i as TimePicker };

//# sourceMappingURL=time.js.map