// components/Rating.js
import { $html } from "sigpro";
import { val, ui, joinClass } from "../core/utils.js";

export const Rating = (props) => {
  const { ui: uiProps, class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;

  const dynamicClasses = [
    ui('rating', uiProps),
    className
  ].filter(Boolean).join(' ');

  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;

  return $html(
    "div",
    {
      ...rest,
      class: () => joinClass(`rating ${val(readonly) ? "pointer-events-none" : ""}`, dynamicClasses),
    },
    Array.from({ length: val(count) }, (_, i) => {
      const starValue = i + 1;
      return $html("input", {
        type: "radio",
        name: ratingGroup,
        class: `mask ${mask}`,
        checked: () => Math.round(val(value)) === starValue,
        onchange: () => {
          if (!val(readonly)) {
            if (typeof onchange === "function") {
              onchange(starValue);
            }
            else if (typeof value === "function") {
              value(starValue);
            }
          }
        },
      });
    })
  );
};