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";
import { renderCheckbox as external_checkbox_js_renderCheckbox } from "../../checkbox.js";
import { renderTriStateCheckbox } from "../../triStateCheckbox.js";
import { renderFacetValueExclude } from "../facet-value-exclude/facet-value-exclude.js";
const renderFacetValueCheckbox = ({ props })=>(children)=>{
        const id = randomID('facet-value-');
        const count = props.numberOfResults.toLocaleString(props.i18n.language);
        const ariaLabelAttributes = {
            value: props.displayValue,
            count: props.numberOfResults,
            formattedCount: count,
            interpolation: {
                escapeValue: false
            }
        };
        const selectedAriaLabel = props.i18n.t('facet-value', ariaLabelAttributes);
        const excludedAriaLabel = props.i18n.t('facet-value-exclude', ariaLabelAttributes);
        let labelRef;
        const isTriStateCheckbox = (props)=>'state' in props && 'isSelected' in props;
        const renderCheckbox = ()=>{
            const attributes = {
                id,
                onToggle: ()=>props.onClick(),
                part: 'value-checkbox',
                class: 'value-checkbox',
                ariaLabel: selectedAriaLabel,
                ref: props.buttonRef,
                onMouseDown: (e)=>createRipple(e, {
                        color: 'neutral',
                        parent: labelRef
                    }),
                iconPart: 'value-checkbox-icon'
            };
            if (isTriStateCheckbox(props)) return renderTriStateCheckbox({
                props: {
                    ...attributes,
                    state: props.state
                }
            });
            return external_checkbox_js_renderCheckbox({
                props: {
                    ...attributes,
                    checked: props.isSelected
                }
            });
        };
        const renderExclusion = ()=>{
            if (isTriStateCheckbox(props)) return renderFacetValueExclude({
                props: {
                    onClick: ()=>props.onExclude?.(),
                    ariaLabel: excludedAriaLabel
                }
            });
        };
        return html`
      ${keyed(props.displayValue, html`<li class="group relative flex items-center">
          ${renderCheckbox()}
          <label
            ${ref_js_ref((ref)=>{
            labelRef = ref;
        })}
            .htmlFor=${id}
            part="value-checkbox-label"
            class="items-center"
            @mousedown=${(e)=>createRipple(e, {
                color: 'neutral'
            })}
            aria-hidden="true"
          >
            ${children}
            <span part="value-count" class="value-count">
              ${props.i18n.t('between-parentheses', {
            text: count
        })}
            </span>
          </label>
          ${renderExclusion()}
        </li>`)}
    `;
    };
export { renderFacetValueCheckbox };
