import { html, nothing } from "lit";
import arrow_right from "../../../images/arrow-right.js";
import "../atomic-icon/atomic-icon.js";
import { renderButton } from "../button.js";
import { renderCarouselIndicator } from "./image-carousel-indicators.js";
const renderImageCarousel = ({ props })=>{
    const commonPaginationClasses = 'w-6 h-6 grid mobile-only:w-10 mobile-only:h-10 justify-center items-center z-1 group rounded-full duration-200 opacity-50 hover:opacity-100 focus:opacity-100 transition-opacity hover:shadow-sm bottom-0 mb-1 absolute';
    const commonArrowClasses = 'w-4 align-middle text-on-background group-hover:text-primary';
    const renderPreviousButton = ()=>renderButton({
            props: {
                style: 'text-primary',
                ariaLabel: props.bindings.i18n.t('previous'),
                onClick: (event)=>{
                    event?.stopPropagation();
                    props.previousImage();
                },
                part: 'previous-button',
                class: `${commonPaginationClasses} left-0 ml-1`
            }
        })(html`
      <atomic-icon
        part="previous-icon"
        icon=${arrow_right}
        class=${`${commonArrowClasses} rotate-180`}
      ></atomic-icon>
    `);
    const renderNextButton = ()=>renderButton({
            props: {
                style: 'text-primary',
                ariaLabel: props.bindings.i18n.t('next'),
                onClick: (event)=>{
                    event?.stopPropagation();
                    props.nextImage();
                },
                part: 'next-button',
                class: `${commonPaginationClasses} right-0 mr-1`
            }
        })(html`
      <atomic-icon
        part="next-icon"
        icon=${arrow_right}
        class=${commonArrowClasses}
      ></atomic-icon>
    `);
    const renderIndicators = ()=>renderCarouselIndicator({
            props: {
                numberOfImages: props.numberOfImages,
                currentImage: props.currentImage,
                navigateToImage: props.navigateToImage
            }
        });
    return (children)=>{
        if (!children || children === nothing) return nothing;
        return html` <div
      class="relative flex w-full min-w-full items-center justify-center"
      role="region"
      aria-roledescription="carousel"
      aria-label=${props.label}
    >
      ${renderPreviousButton()}
      <div class="w-full h-full" aria-live="polite" aria-atomic="false">
        ${children}
      </div>
      ${renderNextButton()} ${renderIndicators()}
    </div>`;
    };
};
export { renderImageCarousel };
