import { html, nothing } from "lit";
import { map } from "lit/directives/map.js";
import arrow_right from "../../images/arrow-right.js";
import "./atomic-icon/atomic-icon.js";
import { renderButton } from "./button.js";
const commonPaginationClasses = 'w-10 h-10 grid justify-center items-center absolute top-1/2 -translate-y-1/2 z-1 shadow-lg group';
const commonArrowClasses = 'w-3.5 align-middle text-on-background group-hover:text-primary group-focus:text-primary-light';
const renderPreviousButton = (numberOfPages, previousPage, bindings)=>{
    if (numberOfPages <= 1) return nothing;
    const buttonProps = {
        style: 'outline-primary',
        part: 'previous-button',
        class: `${commonPaginationClasses} -translate-x-1/2`,
        onClick: previousPage,
        ariaLabel: bindings.i18n.t('previous')
    };
    return renderButton({
        props: buttonProps
    })(html`<atomic-icon
      part="previous-icon"
      class=${`${commonArrowClasses} rotate-180`}
      icon=${arrow_right}
    ></atomic-icon>`);
};
const renderNextButton = (numberOfPages, nextPage, bindings)=>{
    if (numberOfPages <= 1) return nothing;
    const buttonProps = {
        style: 'outline-primary',
        part: 'next-button',
        class: `${commonPaginationClasses} right-0 translate-x-1/2`,
        onClick: nextPage,
        ariaLabel: bindings.i18n.t('next')
    };
    return renderButton({
        props: buttonProps
    })(html`<atomic-icon
      part="next-icon"
      class=${commonArrowClasses}
      icon=${arrow_right}
    ></atomic-icon>`);
};
const renderIndicators = (numberOfPages, currentPage)=>{
    if (numberOfPages <= 1) return nothing;
    return html`
    <ul part="indicators" class="mt-6 flex justify-center gap-2">
      ${map(Array.from({
        length: numberOfPages
    }), (_, index)=>{
        const isActive = index === currentPage % numberOfPages;
        return html`
          <li
            part=${`indicator${isActive ? ' active-indicator' : ''}`}
            class=${`h-1 w-12 rounded-md ${isActive ? 'bg-primary' : 'bg-neutral'} `}
          ></li>
        `;
    })}
    </ul>
  `;
};
const renderCarousel = ({ props })=>(children)=>{
        if (!children || children === nothing) return html``;
        const { previousPage, nextPage, numberOfPages, currentPage } = props;
        return html`
      <div
        class="relative"
        part="carousel"
        role="region"
        aria-roledescription="carousel"
        aria-label=${props.ariaLabel}
      >
        <div class="carousel-inner relative">
          <div class="carousel-controls">
            ${renderPreviousButton(numberOfPages, previousPage, props.bindings)}
            ${renderNextButton(numberOfPages, nextPage, props.bindings)}
          </div>
          <div class="carousel-items" aria-live="polite" aria-atomic="false">
            ${children}
          </div>
        </div>
        ${renderIndicators(numberOfPages, currentPage)}
      </div>
    `;
    };
export { renderCarousel };
