"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { useInterpret, useSelector } from "@xstate/react";
import { useRef, useEffect, forwardRef } from "react";
import buildCounterMachine from "./machine/counter.machine.js";
import { countSelector, isMaxSelector, isMinSelector, notificationSelector } from "./machine/counter.selectors.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Text } from "../../atoms/Text/Text.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { buildTransition } from "../../tokens/utils.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
const Button = forwardRef(
  ({ children, onClick, disabled }, ref) => {
    return /* @__PURE__ */ jsx(
      "button",
      {
        ref,
        type: "button",
        onClick,
        disabled,
        sx: {
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: BorderRadius.FULL,
          backgroundColor: "White8",
          color: "White88",
          width: "44px",
          height: "44px",
          cursor: "pointer",
          border: "none",
          transition: buildTransition("COLORS"),
          WebkitBackfaceVisibility: "hidden",
          ":disabled": {
            cursor: "default",
            backgroundColor: "White4",
            color: "White16",
            pointerEvents: "none"
          },
          "&:hover:not(:disabled)": {
            backgroundColor: "White4"
          }
        },
        children
      }
    );
  }
);
Button.displayName = "Counter._Button";
const Notification = ({ notification }) => {
  if (!notification) {
    return null;
  }
  return /* @__PURE__ */ jsxs(
    Flex,
    {
      justify: "center",
      align: "center",
      sx: {
        position: "absolute",
        py: Spacing["4px"],
        px: Spacing["8px"],
        borderRadius: "10px",
        backgroundColor: "Midnight88",
        animation: "slideup 200ms ease forwards",
        "@keyframes slideup": {
          from: {
            transform: "translateY(-75%)"
          },
          to: {
            transform: "translateY(-150%)"
          }
        }
      },
      children: [
        notification === "success" ? /* @__PURE__ */ jsx(Icon.Check, { color: "Green", size: "12px" }) : /* @__PURE__ */ jsx(Icon.Close, { color: "Red", size: "12px" }),
        /* @__PURE__ */ jsx(Text.C10, { sx: { ml: Spacing["4px"] }, children: notification === "success" ? "Saved" : "Try again" })
      ]
    }
  );
};
Notification.displayName = "Counter._Notification";
const Counter = ({ id, min = 0, max = Infinity, start = 0, maxAlert, onChange, saveAsync }) => {
  const counterMachineRef = useRef();
  if (!counterMachineRef.current) {
    counterMachineRef.current = buildCounterMachine({ id, min, max, start, onChange, saveAsync });
  }
  const counterMachineSvc = useInterpret(counterMachineRef.current);
  const { send } = counterMachineSvc;
  const count = useSelector(counterMachineSvc, countSelector);
  const isMax = useSelector(counterMachineSvc, isMaxSelector);
  const isMin = useSelector(counterMachineSvc, isMinSelector);
  const notification = useSelector(counterMachineSvc, notificationSelector);
  useEffect(() => {
    send({ type: "UPDATE_MAX", payload: max });
  }, [max, send]);
  useEffect(() => {
    send({ type: "UPDATE_MIN", payload: min });
  }, [min, send]);
  const increment = () => {
    send({ type: "INC" });
  };
  const decrement = () => {
    send({ type: "DEC" });
  };
  return /* @__PURE__ */ jsx(
    ControlledCounter,
    {
      count,
      isMax,
      isMin,
      maxAlert,
      increment,
      decrement,
      notification: notification ?? void 0
    }
  );
};
function ControlledCounter({
  count,
  isMax,
  isMin,
  maxAlert,
  increment,
  decrement,
  notification
}) {
  return /* @__PURE__ */ jsxs(Flex, { justify: "center", sx: { position: "relative" }, children: [
    /* @__PURE__ */ jsx(Notification, { notification }),
    /* @__PURE__ */ jsx(Button, { onClick: decrement, disabled: isMin, children: /* @__PURE__ */ jsx(Icon.Remove, { title: "Decrease" }) }),
    /* @__PURE__ */ jsx(Flex, { sx: { justifyContent: "center", alignItems: "center", mx: Spacing["8px"], minWidth: "48px" }, children: /* @__PURE__ */ jsx(Text.P20, { color: !count ? "White48" : void 0, children: count }) }),
    /* @__PURE__ */ jsx(Tooltip, { content: { text: isMax ? maxAlert : null }, delayDuration: 0, children: /* @__PURE__ */ jsx("span", { sx: { display: "inline-block" }, children: /* @__PURE__ */ jsx(Button, { onClick: increment, disabled: isMax, children: /* @__PURE__ */ jsx(Icon.Add, { title: "Increase" }) }) }) })
  ] });
}
Counter.Controlled = ControlledCounter;
export {
  Counter
};
