import "../atomic-icon/atomic-icon.js";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
const renderRating = ({ props })=>{
    const width = (props.numberOfActiveIcons / props.numberOfTotalIcons * 100).toString() + '%';
    const iconSize = `${props.iconSize ?? 0.75}rem`;
    const renderIcon = (active)=>{
        const iconClass = tw({
            'shrink-0': true,
            'text-rating-icon-active': active,
            'text-rating-icon-inactive': !active
        });
        const iconStyle = {
            width: iconSize,
            height: iconSize
        };
        return html`<atomic-icon
      icon=${props.icon}
      class=${multiClassMap(iconClass)}
      style=${styleMap(iconStyle)}
      part="value-rating-icon"
    ></atomic-icon>`;
    };
    const emptyIconDisplay = ()=>{
        const emptyIcons = [];
        for(let i = 0; i < props.numberOfTotalIcons; i++)emptyIcons.push(renderIcon(false));
        return emptyIcons;
    };
    const filledIconDisplay = ()=>{
        const filledIcons = [];
        for(let i = 0; i < props.numberOfTotalIcons; i++)filledIcons.push(renderIcon(true));
        return filledIcons;
    };
    return html`<div
    class="relative w-max"
    part="value-rating"
    role="img"
    aria-label=${props.i18n.t('stars', {
        count: props.numberOfActiveIcons,
        max: props.numberOfTotalIcons
    })}
  >
    <div class="z-0 flex gap-0.5">${emptyIconDisplay()}</div>
    <div
      class="absolute top-0 left-0 z-1 flex gap-0.5 overflow-hidden"
      style=${styleMap({
        width
    })}
    >
      ${filledIconDisplay()}
    </div>
  </div>`;
};
export { renderRating };
