// #region Imports
import { html } from '../../../../Dom/Html';
import { choose, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { FileUploadView } from '../../../Types/FileUploadView';
import { Fit } from '../../../Types/Fit';
import { Orientation } from '../../../Types/Orientation';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link FileUploadItemElement}.
 *
 * @public
 */
export function fileUploadItemElementTemplate(e) {
    const toBytes = (self, precision = 0) => {
        const units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
        if (isNaN(self) || !isFinite(self)) {
            return '-';
        }
        const index = Math.floor(Math.log(self) / Math.log(1024));
        return `${(self / 1024 ** Math.floor(index)).toFixed(precision)} ${units[index]}`;
    };
    return html `
        ${choose(e.view, [[FileUploadView.Card, () => html `
        `], [FileUploadView.Chip, () => html `
        <mosaik-chip .appearance="${Appearance.Outline}"
                     ?closeable="${e.controlled}">
            <mosaik-stack slot="label" .orientation="${Orientation.Horizontal}">
                <mosaik-text part="name"
                             .text="${e.file?.name}"
                             .truncate="${true}"></mosaik-text>
                <mosaik-text part="extension"
                             .text="${e.file?.ext}"></mosaik-text>
                ${when(e.file?.blob, () => html `
                <mosaik-text part="size"
                             .text="${toBytes(e.file?.blob?.size ?? 0)}"></mosaik-text>
                `)}
            </mosaik-stack>
        </mosaik-chip>
        `], [FileUploadView.List, () => html `
        <mosaik-stack .orientation="${Orientation.Horizontal}"
                      .verticalAlignment="${VerticalAlignment.Center}"
                      .fit="${Fit.Both}"
                      .gap="${'16px'}">
            <mosaik-stack .orientation="${Orientation.Horizontal}"
                          .fit="${Fit.Width}"
                          .gap="${'8px'}">
                <mosaik-text part="name"
                             .text="${e.file?.name}"
                             .truncate="${true}"></mosaik-text>
                <mosaik-text part="extension"
                             .text="${e.file?.ext}"></mosaik-text>
                ${when(e.file?.blob, () => html `
                <mosaik-text part="size"
                             .text="${toBytes(e.file?.blob?.size ?? 0)}"></mosaik-text>
                `)}
            </mosaik-stack>
            <mosaik-stack part="actions" .orientation="${Orientation.Horizontal}">
                ${when(e.controlled, () => html `
                <mosaik-button .appearance="${Appearance.Plain}"
                               .icon="${'M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z'}"
                               @click="${(x) => e.onSave(x)}"></mosaik-button>
                <mosaik-button .appearance="${Appearance.Plain}"
                               .icon="${'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'}"
                               @click="${(x) => e.onDelete(x)}"></mosaik-button>
                `)}
                <slot name="actions"></slot>
            </mosaik-stack>
            ${when(e.file?.current !== e.file?.total, () => html `
            <mosaik-progress-ring .max="${e.file?.total ?? 0}"
                                  .value="${e.file?.current ?? 0}"
                                  .isIndeterminate="${true}"
                                  .thickness="${'2px'}"
                                  .radius="${'8px'}"></mosaik-progress-ring>
            `)}
        </mosaik-stack>
        `], [FileUploadView.Table, () => html `
        `]])}
    `;
}
//# sourceMappingURL=FileUploadItemElementTemplate.js.map