import { jsx as H } from "react/jsx-runtime";
import { useHover as j } from "./index-use-hover.js";
import { useState as b, useRef as z, useEffect as B, useMemo as U } from "react";
import { parseCssVariable as m } from "./index-css-variables-parser.js";
import { Star as q } from "./index-Star.js";
import V from "./index-StarRating.module.scss.js";
const D = (v) => {
  const {
    size: R,
    maxNumberOfStars: o = 5,
    isBlurred: y,
    readonly: t = !0,
    step: n = 0.5,
    onChange: f
  } = v;
  let {
    value: s = 0,
    color: l,
    bgColor: i,
    bgHoverColor: u
  } = v;
  l = m(l), i = m(i), u = m(u);
  const [E, c] = b(0), [I, g] = b(!t), h = z(null), C = j(h);
  s > o && (s = o);
  const d = (r, e) => {
    const a = r - e;
    return a > 0 ? a : 0;
  }, p = (r, e) => n === 1 ? Math.ceil(r.value + e) : Math.min(Math.ceil((r.value + e) / n) * n, o), M = (r, e) => {
    t || !f || (f({
      value: p(r, e)
    }), g(!1), c(0), setTimeout(() => g(!t), 2e3));
  }, S = (r, e) => {
    t || !I || c(p(r, e));
  };
  B(() => {
    C || c(0);
  }, [C]);
  const N = U(() => {
    const r = [V.starRating];
    return t || r.push(V.starRatingInteractive), r.join(" ");
  }, [t]);
  return H("div", {
    className: N,
    ref: h,
    "data-testid": "star-rating",
    "data-rating": s,
    children: [...Array(o)].map((r, e) => H(q, {
      index: e,
      color: l,
      bgColor: i,
      bgHoverColor: u,
      size: R,
      value: d(s, e),
      hoverValue: d(E, e),
      isBlurred: y,
      readonly: t,
      onChange: (a) => M(a, e),
      onHoverUpdate: (a) => S(a, e)
    }, e))
  });
};
export {
  D as StarRating
};
