import { html } from "lit";
import { renderRadioButton } from "../radio-button.js";
const renderChoices = ({ props })=>{
    const { label, groupName, pageSize, choices, lang, scrollToTopEvent, setItemSize, focusOnFirstResultAfterNextSearch, focusOnNextNewResult } = props;
    const focusOnProperResultDependingOnChoice = (choice)=>{
        if (choice < pageSize) focusOnFirstResultAfterNextSearch()?.then(()=>scrollToTopEvent());
        else if (choice > pageSize) focusOnNextNewResult();
    };
    return html`
    <div
      part="buttons"
      role="radiogroup"
      aria-label=${label}
      class="flex flex-wrap gap-2"
    >
      ${choices.map((choice)=>{
        const isSelected = pageSize === choice;
        const parts = [
            'button'
        ];
        if (isSelected) parts.push('active-button');
        const text = choice.toLocaleString(lang);
        return renderRadioButton({
            props: {
                key: 'choice',
                groupName,
                style: 'outline-neutral',
                checked: isSelected,
                ariaLabel: text,
                onChecked: ()=>{
                    focusOnProperResultDependingOnChoice(choice);
                    setItemSize(choice);
                },
                class: 'btn-page focus-visible:bg-neutral-light',
                part: parts.join(' '),
                text,
                selectWhenFocused: false
            }
        });
    })}
    </div>
  `;
};
export { renderChoices };
