// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { choose, repeat, when } from '../../../Directives/Directives';
import { flex } from '../../../Directives/Flex/FlexDirective';
import { Appearance } from '../../../Types/Appearance';
import { FileUploadView } from '../../../Types/FileUploadView';
import { Fit } from '../../../Types/Fit';
import { Orientation } from '../../../Types/Orientation';
import { Variant } from '../../../Types/Variant';
import { VerticalAlignment } from '../../../Types/VerticalAlignment';
// #endregion
/**
 * The template of the {@link FileUploadElement}.
 *
 * @public
 */
export function fileUploadElementTemplate(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 `
        <mosaik-drop-zone part="dropZone"
                          .disabled="${e.disabled}"
                          .appearance="${e.appearance}"
                          .variant="${e.variant}"
                          @dataTransferred="${(x) => e.onDataTransferred(x)}">
            <mosaik-file-picker .directory="${e.directory}"
                                .multiple="${e.multiple}"
                                .accept="${e.accept}"
                                .disabled="${e.disabled}"
                                @filePicked="${(x) => e.add(x.detail.files)}">
                <mosaik-button .appearance="${Appearance.Plain}"
                               .variant="${Variant.Primary}"
                               .label="${e.placeholder}"
                               .icon="${Icons.add}"
                               .disabled="${e.disabled}"></mosaik-button>
            </mosaik-file-picker>
        </mosaik-drop-zone>
        ${choose(e.view, [[FileUploadView.Card, () => html `
            <mosaik-card>
                <mosaik-card-header></mosaik-card-header>
                <mosaik-card-content></mosaik-card-content>
            </mosaik-card>
        `], [FileUploadView.Chip, () => html `
            <div ${flex({ direction: 'row', wrap: 'wrap', fill: true })}>
            ${repeat(e.value, (x) => x.fullName, (x) => html `
            <mosaik-chip .appearance="${e.appearance}"
                         .variant="${e.variant}"
                         ?closeable="${!e.disabled}">
                <mosaik-stack slot="label"
                              .gap="${'8px'}">
                    <mosaik-text part="name"
                                 .text="${x.name}"
                                 .truncate="${true}"></mosaik-text>
                    <mosaik-text part="extension"
                                 .text="${x.ext}"></mosaik-text>
                     <mosaik-text part="size"
                                 .text="${toBytes(x.blob?.size ?? 0)}"></mosaik-text>
                </mosaik-stack>
                ${when(x.current !== x.total, () => html `
                <mosaik-progress-ring slot="close" .max="${x.total ?? 0}"
                                      .value="${x.current ?? 0}"
                                      .isIndeterminate="${true}"
                                      .thickness="${2}"
                                      .radius="${8}"></mosaik-progress-ring>
                `)}
            </mosaik-chip>
            `)}
            </div>
        `], [FileUploadView.List, () => html `
        <mosaik-list>
            ${repeat(e.value, (x) => x.fullName, (x) => html `
            <mosaik-list-item .value="${x}"
                              .variant="${e.variant}">
                <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="${x.name}"
                                    .truncate="${true}"></mosaik-text>
                        <mosaik-text part="extension"
                                    .text="${x.ext}"></mosaik-text>
                        ${when(x.blob, () => html `
                        <mosaik-text part="size"
                                    .text="${toBytes(x.blob?.size ?? 0)}"></mosaik-text>
                        `)}
                    </mosaik-stack>
                    <mosaik-stack part="actions" .orientation="${Orientation.Horizontal}">
                        ${when(e.disabled, () => 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="${() => e.save(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="${() => e.delete(x)}"></mosaik-button>
                        `)}
                        <slot name="actions"></slot>
                    </mosaik-stack>
                    ${when(x.current !== x.total, () => html `
                    <mosaik-progress-ring .max="${x.total ?? 0}"
                                          .value="${x.current ?? 0}"
                                          .isIndeterminate="${true}"
                                          .thickness="${2}"
                                          .radius="${8}"></mosaik-progress-ring>
                    `)}
                </mosaik-stack>
            </mosaik-list-item>
            `)}
        </mosaik-list>
        `], [FileUploadView.Table, () => html `
        <mosaik-table .appearance="${e.appearance}">
            <mosaik-table-header>
                <mosaik-table-row>
                    <mosaik-table-cell .text="${'Name'}"></mosaik-table-cell>
                    <mosaik-table-cell .text="${'Extension'}"></mosaik-table-cell>
                    <mosaik-table-cell .text="${'Size'}"></mosaik-table-cell>
                </mosaik-table-row>
            </mosaik-table-header>
            <mosaik-table-body>
                ${repeat(e.value, (x) => x.fullName, (x) => html `
                <mosaik-table-row>
                    <mosaik-table-cell .text="${x.name}"></mosaik-table-cell>
                    <mosaik-table-cell .text="${x.ext}"></mosaik-table-cell>
                    <mosaik-table-cell .text="${toBytes(x.blob?.size ?? 0)}"></mosaik-table-cell>
                </mosaik-table-row>
                `)}
            </mosaik-table-body>
        </mosaik-table>
        `]])}
    `;
}
//# sourceMappingURL=FileUploadElementTemplate.js.map