import { msg } from '@lit/localize';
import { IconSize } from '@reddit/faceplate-ui/lib/IconSize.js';
import { button, ButtonSize } from '@reddit/faceplate-ui/templates/client/button.js';
import IconUploadOutline from '@reddit/faceplate-ui/templates/client/icons/icon-upload-outline.js';
import { html } from 'lit';
import { DragState } from './drag-and-drop-controller.js';
export function renderEmptyState({ allowImages, allowVideos, inputDragState, }) {
    let label;
    if (allowImages && allowVideos) {
        label = msg('Drag and Drop images or videos or', {
            desc: 'Label for file drag and drop files',
        });
    }
    else if (allowImages) {
        label = msg('Drag and Drop images or', { desc: 'Label for file drag and drop images' });
    }
    else {
        label = msg('Drag and Drop videos or', { desc: 'Label for file drag and drop videos' });
    }
    if (inputDragState === DragState.IN_FRAME) {
        label = msg('Drop here to upload', {
            desc: 'Drop files here to upload.',
        });
    }
    return html `
    <div class="w-full flex items-center justify-center">
      <div id="inputInfo" class="flex flex-row gap-xs items-center">
        ${label}
        ${button({
        size: ButtonSize.Small,
        shape: 'pill',
        appearance: 'secondary',
        attributes: {
            type: 'button',
            className: 'upload-media action',
            id: 'device-upload-button',
        },
        leadingIcon: IconUploadOutline({
            size: IconSize.Small,
        }),
        screenReaderContent: '',
    })}
      </div>
    </div>
  `;
}
//# sourceMappingURL=render-empty-state.js.map