import { jsxs as _, jsx as r } from "react/jsx-runtime";
/* empty css                */
import { useDynamicImport as S } from "./index-use-dynamic-import.js";
import { useRef as c, useState as H, useEffect as N, useMemo as B } from "react";
import { StyledSVG as u } from "./index-StyledSVG.js";
const G = (d) => {
  const {
    index: l,
    color: h,
    bgColor: f,
    bgHoverColor: n,
    isBlurred: w,
    readonly: g = !0,
    onChange: m,
    onHoverUpdate: v
  } = d;
  let {
    size: e = 16.82,
    value: s = 0.5,
    hoverValue: o = 0
  } = d;
  const x = c(null), y = c(null), b = c(null), [k, C] = H(!1);
  N(() => {
    C(!0);
  }, [e]), s > 1 && (s = 1), o > 1 && (o = 1), e = e + 1;
  const {
    SvgIcon: a,
    loading: O,
    error: R
  } = S("star.svg"), V = B(() => l === void 0 ? {} : {
    "aria-label": `${l + 1} star(s)`,
    "data-testid": `star-${l}`
  }, [l]), p = (t) => {
    const {
      left: i,
      width: M
    } = t.currentTarget.getBoundingClientRect();
    return (t.clientX - i) / M;
  };
  return _("div", {
    style: {
      display: k ? "" : "none",
      filter: w ? "blur(3px)" : ""
    },
    className: "rating",
    onClick: (t) => {
      g || !m || m({
        value: p(t)
      });
    },
    onMouseMove: (t) => {
      if (g || !v) return;
      const i = p(t);
      i !== o && v({
        value: i
      });
    },
    role: "checkbox",
    "aria-checked": s === 1 ? !0 : s === 0 ? !1 : "mixed",
    ...V,
    children: [r("span", {
      style: {
        width: e * s,
        height: e
      },
      ref: y,
      className: "rating__result",
      children: r(u, {
        width: e,
        height: e,
        color: h || "var(--p500)",
        src: a
      })
    }), r("span", {
      style: {
        width: e * o,
        height: e
      },
      ref: b,
      className: "rating__result",
      children: r(u, {
        width: e,
        height: e,
        color: n || "var(--white)",
        src: a,
        fillOpacity: n ? "1" : "0.2"
      })
    }), r("span", {
      style: {
        width: e,
        height: e
      },
      ref: x,
      className: "rating__max",
      children: r(u, {
        width: e,
        height: e,
        color: f || "var(--n200)",
        src: a
      })
    })]
  });
};
export {
  G as Star
};
