import { Slider as e } from "../../ui/slider.js";
import { useFieldConfig as t } from "../hooks/useFieldConfig.js";
import { BaseFieldWrapper as n } from "./BaseFieldWrapper.js";
import { useRef as r, useState as i } from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { Controller as s } from "react-hook-form";
//#region src/components/dynamic-form/fields/SliderField.tsx
var c = (e, t) => {
	let n = e.minimum ?? 0, r = e.maximum ?? 100;
	return {
		required: t ? "This field is required" : void 0,
		min: {
			value: n,
			message: `Value must be at least ${n}`
		},
		max: {
			value: r,
			message: `Value must be at most ${r}`
		},
		validate: {
			multipleOf: (t) => e.multipleOf && t % e.multipleOf !== 0 ? `Value must be a multiple of ${e.multipleOf}` : !0,
			isNumber: (e) => typeof e != "number" || isNaN(e) ? "Value must be a valid number" : !0
		}
	};
}, l = ({ name: l, schema: u, ui: d, required: f, form: p, disabled: m }) => {
	let h = t(l, u, d, m), [g, _] = i(!1), [v, y] = i(!1), b = r(null), x = u.minimum ?? 0, S = u.maximum ?? 100, C = u.multipleOf ?? 1, w = u.default ?? x, T = c(u, f), E = (e) => {
		if (!b.current) return 0;
		let t = b.current.offsetWidth;
		return (e - x) / (S - x) * t;
	};
	return /* @__PURE__ */ a(s, {
		name: l,
		control: p.control,
		defaultValue: w,
		rules: T,
		render: ({ field: { onChange: t, value: r } }) => {
			let i = typeof r == "number" && !isNaN(r) ? r : w, s = E(i);
			return /* @__PURE__ */ a(n, {
				name: l,
				label: h.fieldLabel,
				required: f,
				error: h.error,
				helpText: h.helpText,
				description: h.description,
				children: /* @__PURE__ */ o("div", {
					className: "relative px-2",
					ref: b,
					children: [
						/* @__PURE__ */ a("div", {
							className: "slider-with-hover",
							onMouseMove: (e) => {
								if (!b.current) return;
								let t = b.current.getBoundingClientRect(), n = e.clientX - t.left - 8;
								y(Math.abs(n - s) < 12);
							},
							onMouseLeave: () => y(!1),
							children: /* @__PURE__ */ a(e, {
								id: l,
								value: [i],
								onValueChange: (e) => {
									h.isReadOnly || t(e[0]);
								},
								"aria-label": h.fieldLabel,
								step: C,
								min: x,
								max: S,
								disabled: h.isDisabled,
								className: "w-full hover:cursor-pointer",
								onPointerDown: () => _(!0),
								onPointerUp: () => _(!1),
								onPointerLeave: () => {
									_(!1), y(!1);
								},
								...h.getAriaProps()
							})
						}),
						(g || v) && /* @__PURE__ */ a("div", {
							className: "bg-popover text-popover-foreground pointer-events-none absolute -top-10 z-10 rounded-md border px-2 py-1 text-sm shadow-md",
							style: {
								left: `${s}px`,
								transform: "translateX(-50%)"
							},
							role: "tooltip",
							"aria-live": "polite",
							children: i
						}),
						/* @__PURE__ */ o("div", {
							className: "mt-2 flex justify-between",
							children: [/* @__PURE__ */ a("span", {
								className: "text-muted-foreground text-xs",
								"aria-label": `Minimum value: ${x}`,
								children: x
							}), /* @__PURE__ */ a("span", {
								className: "text-muted-foreground text-xs",
								"aria-label": `Maximum value: ${S}`,
								children: S
							})]
						})
					]
				})
			});
		}
	});
};
//#endregion
export { l as SliderField };
