'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import { useWindowInfo } from '@faceless-ui/window-info';
import { isImage } from 'payload/shared';
import React from 'react';
import { SelectInput } from '../../../fields/Select/Input.js';
import { ChevronIcon } from '../../../icons/Chevron/index.js';
import { XIcon } from '../../../icons/X/index.js';
import { useConfig } from '../../../providers/Config/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { AnimateHeight } from '../../AnimateHeight/index.js';
import { Button } from '../../Button/index.js';
import { Drawer } from '../../Drawer/index.js';
import { ErrorPill } from '../../ErrorPill/index.js';
import { Pill } from '../../Pill/index.js';
import { ShimmerEffect } from '../../ShimmerEffect/index.js';
import { createThumbnail } from '../../Thumbnail/createThumbnail.js';
import { Thumbnail } from '../../Thumbnail/index.js';
import { Actions } from '../ActionsBar/index.js';
import { AddFilesView } from '../AddFilesView/index.js';
import './index.scss';
import { useFormsManager } from '../FormsManager/index.js';
import { useBulkUpload } from '../index.js';
const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
const baseClass = 'file-selections';
export function FileSidebar() {
    const { activeIndex, addFiles, forms, isInitializing, removeFile, setActiveIndex, totalErrorCount } = useFormsManager();
    const { initialFiles, initialForms, maxFiles } = useBulkUpload();
    const { i18n, t } = useTranslation();
    const { closeModal, openModal } = useModal();
    const [showFiles, setShowFiles] = React.useState(false);
    const { breakpoints } = useWindowInfo();
    const handleRemoveFile = React.useCallback((indexToRemove)=>{
        removeFile(indexToRemove);
    }, [
        removeFile
    ]);
    const handleAddFiles = React.useCallback((filelist)=>{
        void addFiles(filelist);
        closeModal(addMoreFilesDrawerSlug);
    }, [
        addFiles,
        closeModal
    ]);
    const getFileSize = React.useCallback((file)=>{
        const size = file.size;
        const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
        const decimals = i > 1 ? 1 : 0;
        const formattedSize = (size / Math.pow(1024, i)).toFixed(decimals) + ' ' + [
            'B',
            'kB',
            'MB',
            'GB',
            'TB'
        ][i];
        return formattedSize;
    }, []);
    const totalFileCount = isInitializing ? initialFiles?.length ?? initialForms?.length : forms.length;
    const { collectionSlug: bulkUploadCollectionSlug, selectableCollections, setCollectionSlug } = useBulkUpload();
    const { getEntityConfig } = useConfig();
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            showFiles && `${baseClass}__showingFiles`
        ].filter(Boolean).join(' '),
        children: [
            breakpoints.m && showFiles ? /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__mobileBlur`
            }, void 0, false, {
                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                lineNumber: 87,
                columnNumber: 37
            }, this) : null,
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__header`,
                children: [
                    selectableCollections?.length > 1 && /*#__PURE__*/ _jsxDEV(SelectInput, {
                        className: `${baseClass}__collectionSelect`,
                        isClearable: false,
                        name: "groupBy",
                        onChange: (e)=>{
                            const val = typeof e === 'object' && 'value' in e ? e?.value : e;
                            setCollectionSlug(val);
                        },
                        options: selectableCollections?.map((coll)=>{
                            const config = getEntityConfig({
                                collectionSlug: coll
                            });
                            return {
                                label: config.labels.singular,
                                value: config.slug
                            };
                        }) || [],
                        path: "groupBy",
                        required: true,
                        value: bulkUploadCollectionSlug
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                        lineNumber: 90,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__headerTopRow`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__header__text`,
                                children: [
                                    /*#__PURE__*/ _jsxDEV(ErrorPill, {
                                        count: totalErrorCount,
                                        i18n: i18n,
                                        withMessage: true
                                    }, void 0, false, {
                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                        lineNumber: 114,
                                        columnNumber: 13
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("p", {
                                        children: /*#__PURE__*/ _jsxDEV("strong", {
                                            title: `${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`,
                                            children: [
                                                totalFileCount,
                                                ' ',
                                                t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')
                                            ]
                                        }, void 0, true, {
                                            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                            lineNumber: 116,
                                            columnNumber: 15
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                        lineNumber: 115,
                                        columnNumber: 13
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                lineNumber: 113,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__header__actions`,
                                children: [
                                    (typeof maxFiles === 'number' ? totalFileCount < maxFiles : true) ? /*#__PURE__*/ _jsxDEV(Pill, {
                                        className: `${baseClass}__header__addFile`,
                                        onClick: ()=>openModal(addMoreFilesDrawerSlug),
                                        size: "small",
                                        children: t('upload:addFile')
                                    }, void 0, false, {
                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                        lineNumber: 127,
                                        columnNumber: 15
                                    }, this) : null,
                                    /*#__PURE__*/ _jsxDEV(Button, {
                                        buttonStyle: "transparent",
                                        className: `${baseClass}__toggler`,
                                        onClick: ()=>setShowFiles((prev)=>!prev),
                                        children: [
                                            /*#__PURE__*/ _jsxDEV("span", {
                                                className: `${baseClass}__toggler__label`,
                                                children: /*#__PURE__*/ _jsxDEV("strong", {
                                                    title: `${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`,
                                                    children: [
                                                        totalFileCount,
                                                        ' ',
                                                        t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')
                                                    ]
                                                }, void 0, true, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 141,
                                                    columnNumber: 17
                                                }, this)
                                            }, void 0, false, {
                                                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                lineNumber: 140,
                                                columnNumber: 15
                                            }, this),
                                            /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                                                direction: showFiles ? 'down' : 'up'
                                            }, void 0, false, {
                                                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                lineNumber: 148,
                                                columnNumber: 15
                                            }, this)
                                        ]
                                    }, void 0, true, {
                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                        lineNumber: 135,
                                        columnNumber: 13
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV(Drawer, {
                                        gutter: false,
                                        Header: null,
                                        slug: addMoreFilesDrawerSlug,
                                        children: /*#__PURE__*/ _jsxDEV(AddFilesView, {
                                            onCancel: ()=>closeModal(addMoreFilesDrawerSlug),
                                            onDrop: handleAddFiles
                                        }, void 0, false, {
                                            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                            lineNumber: 152,
                                            columnNumber: 15
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                        lineNumber: 151,
                                        columnNumber: 13
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                lineNumber: 125,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                        lineNumber: 112,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__header__mobileDocActions`,
                        children: /*#__PURE__*/ _jsxDEV(Actions, {}, void 0, false, {
                            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                            lineNumber: 161,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                        lineNumber: 160,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                lineNumber: 88,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__animateWrapper`,
                children: /*#__PURE__*/ _jsxDEV(AnimateHeight, {
                    height: !breakpoints.m || showFiles ? 'auto' : 0,
                    children: /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__filesContainer`,
                        children: [
                            isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map((file, index)=>/*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                                    animationDelay: `calc(${index} * ${60}ms)`,
                                    height: "35px"
                                }, index, false, {
                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                    lineNumber: 172,
                                    columnNumber: 19
                                }, this)) : null,
                            forms.map(({ errorCount, formID, formState }, index)=>{
                                const currentFile = formState?.file?.value || {};
                                return /*#__PURE__*/ _jsxDEV("div", {
                                    className: [
                                        `${baseClass}__fileRowContainer`,
                                        index === activeIndex && `${baseClass}__fileRowContainer--active`,
                                        errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`
                                    ].filter(Boolean).join(' '),
                                    children: [
                                        /*#__PURE__*/ _jsxDEV("button", {
                                            className: `${baseClass}__fileRow`,
                                            onClick: ()=>setActiveIndex(index),
                                            type: "button",
                                            children: [
                                                /*#__PURE__*/ _jsxDEV(SidebarThumbnail, {
                                                    file: currentFile,
                                                    formID: formID
                                                }, void 0, false, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 198,
                                                    columnNumber: 21
                                                }, this),
                                                /*#__PURE__*/ _jsxDEV("div", {
                                                    className: `${baseClass}__fileDetails`,
                                                    children: /*#__PURE__*/ _jsxDEV("p", {
                                                        className: `${baseClass}__fileName`,
                                                        title: currentFile.name,
                                                        children: currentFile.name || t('upload:noFile')
                                                    }, void 0, false, {
                                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                        lineNumber: 200,
                                                        columnNumber: 23
                                                    }, this)
                                                }, void 0, false, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 199,
                                                    columnNumber: 21
                                                }, this),
                                                currentFile instanceof File ? /*#__PURE__*/ _jsxDEV("p", {
                                                    className: `${baseClass}__fileSize`,
                                                    children: getFileSize(currentFile)
                                                }, void 0, false, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 205,
                                                    columnNumber: 23
                                                }, this) : null,
                                                /*#__PURE__*/ _jsxDEV("div", {
                                                    className: `${baseClass}__remove ${baseClass}__remove--underlay`,
                                                    children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                                                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                        lineNumber: 208,
                                                        columnNumber: 23
                                                    }, this)
                                                }, void 0, false, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 207,
                                                    columnNumber: 21
                                                }, this),
                                                errorCount ? /*#__PURE__*/ _jsxDEV(ErrorPill, {
                                                    className: `${baseClass}__errorCount`,
                                                    count: errorCount,
                                                    i18n: i18n
                                                }, void 0, false, {
                                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                    lineNumber: 212,
                                                    columnNumber: 23
                                                }, this) : null
                                            ]
                                        }, void 0, true, {
                                            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                            lineNumber: 193,
                                            columnNumber: 19
                                        }, this),
                                        /*#__PURE__*/ _jsxDEV("button", {
                                            "aria-label": t('general:remove'),
                                            className: `${baseClass}__remove ${baseClass}__remove--overlay`,
                                            onClick: ()=>handleRemoveFile(index),
                                            type: "button",
                                            children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                                                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                                lineNumber: 226,
                                                columnNumber: 21
                                            }, this)
                                        }, void 0, false, {
                                            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                            lineNumber: 220,
                                            columnNumber: 19
                                        }, this)
                                    ]
                                }, formID, true, {
                                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                                    lineNumber: 183,
                                    columnNumber: 17
                                }, this);
                            })
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                        lineNumber: 167,
                        columnNumber: 11
                    }, this)
                }, void 0, false, {
                    fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                    lineNumber: 166,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
                lineNumber: 165,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
        lineNumber: 84,
        columnNumber: 5
    }, this);
}
function SidebarThumbnail({ file, formID }) {
    const [thumbnailURL, setThumbnailURL] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(true);
    React.useEffect(()=>{
        let isCancelled = false;
        async function generateThumbnail() {
            setIsLoading(true);
            setThumbnailURL(null);
            try {
                if (isImage(file.type)) {
                    const url = await createThumbnail(file);
                    if (!isCancelled) {
                        setThumbnailURL(url);
                    }
                } else {
                    setThumbnailURL(null);
                }
            } catch (_) {
                if (!isCancelled) {
                    setThumbnailURL(null);
                }
            } finally{
                if (!isCancelled) {
                    setIsLoading(false);
                }
            }
        }
        void generateThumbnail();
        return ()=>{
            isCancelled = true;
        };
    }, [
        file
    ]);
    if (isLoading) {
        return /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
            className: `${baseClass}__thumbnail-shimmer`,
            disableInlineStyles: true
        }, void 0, false, {
            fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
            lineNumber: 277,
            columnNumber: 12
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(Thumbnail, {
        className: `${baseClass}__thumbnail`,
        fileSrc: thumbnailURL
    }, `${formID}-${thumbnailURL || 'placeholder'}`, false, {
        fileName: "src/elements/BulkUpload/FileSidebar/index.tsx",
        lineNumber: 281,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map