"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { useRef, useState } from "react";
import { modeChangeAnimation, Slider } from "./Slider.js";
import { Input } from "../Input/Input.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Button } from "../Button/Button.js";
function PreciseSlider(props) {
  let { max = 100, min = 0, step = 1, defaultValue, preciseMax: _1, ...rest } = props;
  step = typeof step === "number" ? { input: step, slider: step } : step;
  const containerRef = useRef(null);
  const [innerValue, setInnerValue] = useState(defaultValue);
  const [isPreciseInput, setIsPreciseInput] = useState(false);
  const [warning, setWarning] = useState();
  const value = props.value || innerValue;
  const onChange = (newValue) => {
    var _a;
    (_a = props.onValueChange) == null ? void 0 : _a.call(props, newValue);
    if (props.value == null) {
      setInnerValue(newValue);
    }
  };
  return /* @__PURE__ */ jsxs(
    Flex.Row,
    {
      ref: containerRef,
      gap: Spacing["16px"],
      align: "center",
      sx: { height: "38px" },
      onKeyDown: (event) => {
        if (isPreciseInput && event.key === "Escape") setIsPreciseInput(false);
      },
      children: [
        isPreciseInput ? /* @__PURE__ */ jsx(
          "div",
          {
            sx: {
              flex: 1,
              height: "38px",
              overflow: "visible"
            },
            children: /* @__PURE__ */ jsx(
              Input,
              {
                type: "number",
                value,
                onChange: (event) => {
                  const validationMessage = event.target.validationMessage;
                  setWarning(validationMessage || null);
                  const value2 = parseFloat(event.target.value);
                  onChange(parseFloat(event.target.value));
                  if (!validationMessage && props.onValueCommit) {
                    props.onValueCommit(value2);
                  }
                },
                warning,
                defaultValue,
                min,
                max: "preciseMax" in props ? props.preciseMax : max,
                step: step.input != null ? `${step.input}` : void 0,
                size: "small",
                sx: { animation: modeChangeAnimation, position: "relative" }
              }
            )
          }
        ) : /* @__PURE__ */ jsx(Slider, { ...rest, min, max, step: step.slider, value, defaultValue }),
        /* @__PURE__ */ jsx(
          PreciseModeButton,
          {
            disabled: value != null && value > max,
            isToggled: isPreciseInput,
            onClick: () => {
              const container = containerRef.current;
              if (container) container.style.setProperty("--mounted", "1");
              setIsPreciseInput((s) => !s);
            }
          }
        )
      ]
    }
  );
}
function PreciseModeButton({
  onClick,
  isToggled,
  disabled
}) {
  return /* @__PURE__ */ jsx(Button, { shape: "round", size: "small", variant: "secondary", onClick, disabled: isToggled && disabled, children: isToggled ? /* @__PURE__ */ jsx(Icon.Close, { title: "Switch to slider" }) : /* @__PURE__ */ jsx(Icon.Edit, { title: "Switch to precise input" }) });
}
export {
  PreciseSlider
};
