import { html } from "lit";
import { localizedString } from "../../../directives/localized-string.js";
import images_close from "../../../images/close.js";
import { ATOMIC_MODAL_EXPORT_PARTS } from "../atomic-modal/export-parts.js";
import "../atomic-modal/atomic-modal.js";
import { renderButton } from "../button.js";
import "../atomic-icon/atomic-icon.js";
const renderRefineModal = ({ props })=>(children)=>{
        const flushFacetElements = ()=>{
            props.host.querySelector('div[slot="facets"]')?.remove();
        };
        const renderHeader = ()=>html`
        <div slot="header" class="contents">
          <h1 part="title" class="truncate">${props.title}</h1>
          ${renderButton({
                props: {
                    style: 'text-transparent',
                    class: 'grid place-items-center',
                    part: 'close-button',
                    onClick: props.onClose,
                    ariaLabel: props.i18n.t('close')
                }
            })(html`<atomic-icon
              part="close-icon"
              class="h-5 w-5"
              icon=${images_close}
            ></atomic-icon>`)}
        </div>
      `;
        const renderFooter = ()=>html`
        <div part="footer-content" slot="footer">
          ${renderButton({
                props: {
                    style: 'primary',
                    part: 'footer-button',
                    class: 'flex w-full justify-center p-3 text-lg',
                    onClick: props.onClose
                }
            })(html`
            <span part="footer-button-text" class="mr-1 truncate">
              ${props.i18n.t(props.i18nFooterButtonTextKey)}
            </span>
            <span part="footer-button-count">
              ${localizedString({
                i18n: props.i18n,
                key: 'between-parentheses',
                params: {
                    text: props.numberOfItems.toLocaleString(props.i18n.language)
                }
            })}
            </span>
          `)}
        </div>
      `;
        return html`
      <atomic-modal
        .fullscreen=${true}
        .isOpen=${props.isOpen}
        .source=${props.openButton}
        .container=${props.host}
        .close=${props.onClose}
        .onAnimationEnded=${()=>{
            if (!props.isOpen) flushFacetElements();
        }}
        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
        .boundary=${props.boundary ?? 'page'}
        .scope=${props.scope}
      >
        ${renderHeader()} ${children} ${renderFooter()}
      </atomic-modal>
    `;
    };
export { renderRefineModal };
