import { jsx as r } from "react/jsx-runtime";
/* empty css                  */
import { ComponentContainer as k } from "./index-ComponentContainer.js";
import { useState as z, useEffect as u } from "react";
import D from "./index-Slider2.js";
const T = (d) => {
  const {
    value: t,
    min: C,
    max: V,
    step: h = 1,
    marks: m,
    onChangeCommitted: v,
    onChange: i,
    disabled: x,
    valueLabelDisplay: S = "off",
    type: b = "default",
    size: y = "default",
    formconfig: e,
    externalControlled: R = !1
  } = d;
  let {
    targetRef: l
  } = d;
  const [_, s] = z(t);
  u(() => {
    e != null && e._inputRef && (e.fieldType = "Slider", l ? e._inputRef = l : l = e._inputRef);
  }, []), u(() => {
    (e == null ? void 0 : e.stateValue) !== void 0 && e.stateValue !== null && s(e == null ? void 0 : e.stateValue), n(null, e == null ? void 0 : e.stateValue, e == null ? void 0 : e.stateValue);
  }, [e == null ? void 0 : e.stateValue]), u(() => {
    var a;
    e ? (a = e == null ? void 0 : e.setStateValue) == null || a.call(e, t) : s(t), n(null, t, t);
  }, [t]);
  const n = (a, p, $) => {
    R || s(p), i && i(a, p, $);
  };
  return r(k, {
    className: `vng-slider-container vng-slider-${b} vng-slider-size-${y}`,
    children: r(D, {
      ref: l,
      min: C,
      max: V,
      step: h,
      value: _,
      marks: m,
      onChange: n,
      onChangeCommitted: v,
      disabled: x,
      valueLabelDisplay: S
    })
  });
};
export {
  T as Slider
};
