import { Slider } from "../../ui/slider.js";
import { useFieldConfig } from "../hooks/useFieldConfig.js";
import { BaseFieldWrapper } from "./BaseFieldWrapper.js";
import { c } from "react/compiler-runtime";
import React, { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Controller } from "react-hook-form";
var buildSliderValidationRules = (t, i) => {
	let a = t.minimum ?? 0, o = t.maximum ?? 100;
	return {
		required: i ? "This field is required" : void 0,
		min: {
			value: a,
			message: `Value must be at least ${a}`
		},
		max: {
			value: o,
			message: `Value must be at most ${o}`
		},
		validate: {
			multipleOf: (i) => t.multipleOf && i % t.multipleOf !== 0 ? `Value must be a multiple of ${t.multipleOf}` : !0,
			isNumber: (t) => typeof t != "number" || isNaN(t) ? "Value must be a valid number" : !0
		}
	};
};
const SliderField = (s) => {
	let f = c(23), { name: p, schema: m, ui: h, required: g, form: _, disabled: v } = s, y = useFieldConfig(p, m, h, v), [b, x] = useState(!1), [S, C] = useState(!1), w = useRef(null), T = m.minimum ?? 0, E = m.maximum ?? 100, D = m.multipleOf ?? 1, O = m.default ?? T, k;
	f[0] !== g || f[1] !== m ? (k = buildSliderValidationRules(m, g), f[0] = g, f[1] = m, f[2] = k) : k = f[2];
	let A = k, j;
	f[3] !== E || f[4] !== T ? (j = (t) => {
		if (!w.current) return 0;
		let i = w.current.offsetWidth;
		return (t - T) / (E - T) * i;
	}, f[3] = E, f[4] = T, f[5] = j) : j = f[5];
	let M = j, N;
	f[6] !== M || f[7] !== y || f[8] !== O || f[9] !== b || f[10] !== S || f[11] !== E || f[12] !== T || f[13] !== p || f[14] !== g || f[15] !== D ? (N = (i) => {
		let { field: o } = i, { onChange: s, value: l } = o, u = typeof l == "number" && !isNaN(l) ? l : O, d = M(u);
		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
			name: p,
			label: y.fieldLabel,
			required: g,
			error: y.error,
			helpText: y.helpText,
			description: y.description,
			children: /* @__PURE__ */ jsxs("div", {
				className: "relative px-2",
				ref: w,
				children: [
					/* @__PURE__ */ jsx("div", {
						className: "slider-with-hover",
						onMouseMove: (t) => {
							if (!w.current) return;
							let i = w.current.getBoundingClientRect(), a = t.clientX - i.left - 8;
							C(Math.abs(a - d) < 12);
						},
						onMouseLeave: () => C(!1),
						children: /* @__PURE__ */ jsx(Slider, {
							id: p,
							value: [u],
							onValueChange: (t) => {
								y.isReadOnly || s(t[0]);
							},
							"aria-label": y.fieldLabel,
							step: D,
							min: T,
							max: E,
							disabled: y.isDisabled,
							className: "w-full hover:cursor-pointer",
							onPointerDown: () => x(!0),
							onPointerUp: () => x(!1),
							onPointerLeave: () => {
								x(!1), C(!1);
							},
							...y.getAriaProps()
						})
					}),
					(b || S) && /* @__PURE__ */ jsx("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: `${d}px`,
							transform: "translateX(-50%)"
						},
						role: "tooltip",
						"aria-live": "polite",
						children: u
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "mt-2 flex justify-between",
						children: [/* @__PURE__ */ jsx("span", {
							className: "text-muted-foreground text-xs",
							"aria-label": `Minimum value: ${T}`,
							children: T
						}), /* @__PURE__ */ jsx("span", {
							className: "text-muted-foreground text-xs",
							"aria-label": `Maximum value: ${E}`,
							children: E
						})]
					})
				]
			})
		});
	}, f[6] = M, f[7] = y, f[8] = O, f[9] = b, f[10] = S, f[11] = E, f[12] = T, f[13] = p, f[14] = g, f[15] = D, f[16] = N) : N = f[16];
	let P;
	return f[17] !== O || f[18] !== _.control || f[19] !== p || f[20] !== N || f[21] !== A ? (P = /* @__PURE__ */ jsx(Controller, {
		name: p,
		control: _.control,
		defaultValue: O,
		rules: A,
		render: N
	}), f[17] = O, f[18] = _.control, f[19] = p, f[20] = N, f[21] = A, f[22] = P) : P = f[22], P;
};
export { SliderField };
