import { NAVIGATION_PLACEMENT, PAGINATION_PLACEMENT, } from '@reddit/faceplate-ui/components/faceplate-carousel.js';
import { IconSize } from '@reddit/faceplate-ui/lib/IconSize.js';
import { button, ButtonSize } from '@reddit/faceplate-ui/templates/client/button.js';
import IconDeleteOutline from '@reddit/faceplate-ui/templates/client/icons/icon-delete-outline.js';
import IconLeftFill from '@reddit/faceplate-ui/templates/client/icons/icon-left-fill.js';
import IconRightFill from '@reddit/faceplate-ui/templates/client/icons/icon-right-fill.js';
import { html } from 'lit';
import { renderLoadingState } from './render-loading-state.js';
import { renderMediaPreview } from './render-media-preview.js';
/**
 * This entire file was copied from shreddit
 * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
 * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
 */
function renderDeleteButton(disabled) {
    return button({
        size: ButtonSize.Small,
        shape: 'pill',
        appearance: 'media',
        attributes: {
            type: 'button',
            disabled,
            className: 'remove-media remove action invisible group-hover:visible',
        },
        leadingIcon: IconDeleteOutline({
            size: IconSize.Small,
        }),
        screenReaderContent: '',
    });
}
function renderTopLeftActions() {
    return html `
    <div class="absolute top-xs left-xs">
      <div class="flex gap-md"></div>
    </div>
  `;
}
function renderTopRightActions(disabled) {
    return html `<div class="absolute top-xs right-xs">${renderDeleteButton(disabled)}</div> `;
}
export function renderUploaderState(media) {
    if (media.status === 'loading') {
        return renderLoadingState(media);
    }
    else {
        return renderMediaPreview(media);
    }
}
export function renderCarousel(mediaController) {
    const hasLoadingMedia = mediaController.hasLoadingMedia();
    return html `
    <div class="w-full relative flex rounded-dx-md overflow-hidden">
      <faceplate-carousel
        autoplay="off"
        nav-placement="${NAVIGATION_PLACEMENT.INSIDE}"
        pagination-placement="${PAGINATION_PLACEMENT.OFF}"
        advance-animation="true"
      >
        <span slot="prevButton">
          ${button({
        appearance: 'media',
        size: ButtonSize.Small,
        leadingIcon: IconLeftFill({ size: IconSize.Small }),
        attributes: {
            type: 'button',
            id: 'media-carousel-prev',
        },
    })}
        </span>
        <ul>
          ${mediaController.media.map((value) => {
        return html `<li class="m-0 text-center rounded-dx-md">
              ${renderUploaderState(value)}
            </li>`;
    })}
        </ul>
        <span slot="nextButton">
          ${button({
        appearance: 'media',
        size: ButtonSize.Small,
        leadingIcon: IconRightFill({ size: IconSize.Small }),
        attributes: {
            type: 'button',
            id: 'media-carousel-next',
        },
    })}
        </span>
      </faceplate-carousel>
      ${renderTopLeftActions()} ${renderTopRightActions(hasLoadingMedia)}
    </div>
  `;
}
//# sourceMappingURL=render-media-carousel.js.map