import { html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { ref as ref_js_ref } from "lit/directives/ref.js";
import { createRipple } from "../../../../utils/ripple-utils.js";
import { randomID } from "../../../../utils/utils.js";
const renderColorFacetCheckbox = ({ props })=>(children)=>{
        const id = randomID('facet-value-');
        const count = props.numberOfResults.toLocaleString(props.i18n.language);
        const ariaLabel = props.i18n.t('facet-value', {
            value: props.displayValue,
            count: props.numberOfResults,
            formattedCount: count
        });
        const partValue = props.displayValue.match(/-?[_a-zA-Z]+[_a-zA-Z0-9-]*/)?.toString();
        let labelRef;
        return html`
      ${keyed(props.displayValue, html`<li class="relative flex items-center">
          <button
            id=${id}
            role="checkbox"
            part=${`value-checkbox value-${partValue}${props.isSelected ? ' value-checkbox-checked' : ''}`}
            @click=${()=>props.onClick()}
            @mousedown=${(e)=>createRipple(e, {
                color: 'neutral',
                parent: labelRef
            })}
            aria-checked=${getAriaCheckedValue(props.isSelected)}
            class=${`value-checkbox ${props.isSelected ? 'ring-primary' : ''}`}
            aria-label=${ariaLabel}
          ></button>
          <label
            ${ref_js_ref((ref)=>{
            labelRef = ref;
        })}
            .htmlFor=${id}
            part="value-checkbox-label"
            @mousedown=${(e)=>createRipple(e, {
                color: 'neutral'
            })}
          >
            ${children}
            <span part="value-count" class="value-count">
              ${props.i18n.t('between-parentheses', {
            text: count
        })}
            </span>
          </label>
        </li>`)}
    `;
    };
const getAriaCheckedValue = (isSelected)=>isSelected ? 'true' : 'false';
export { renderColorFacetCheckbox };
