'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useDroppable } from '@dnd-kit/core';
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { DocumentIcon } from '../../../icons/Document/index.js';
import { ThreeDotsIcon } from '../../../icons/ThreeDots/index.js';
import { useConfig } from '../../../providers/Config/index.js';
import { useFolder } from '../../../providers/Folders/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { Popup } from '../../Popup/index.js';
import { Thumbnail } from '../../Thumbnail/index.js';
import { ColoredFolderIcon } from '../ColoredFolderIcon/index.js';
import { DraggableWithClick } from '../DraggableWithClick/index.js';
import './index.scss';
const baseClass = 'folder-file-card';
export function FolderFileCard({ id, type, className = '', disabled = false, folderType, isDeleting = false, isFocused = false, isSelected = false, itemKey, onClick, onKeyDown, PopupActions, previewUrl, selectedCount = 0, title }) {
    const disableDrop = !id || disabled || type !== 'folder';
    const { isOver, setNodeRef } = useDroppable({
        id: itemKey,
        data: {
            id,
            type,
            folderType
        },
        disabled: disableDrop
    });
    const ref = React.useRef(null);
    React.useEffect(()=>{
        const copyOfRef = ref.current;
        if (isFocused && ref.current) {
            ref.current.focus();
        } else if (!isFocused && ref.current) {
            ref.current.blur();
        }
        return ()=>{
            if (copyOfRef) {
                copyOfRef.blur();
            }
        };
    }, [
        isFocused
    ]);
    return /*#__PURE__*/ _jsxDEV(DraggableWithClick, {
        className: [
            baseClass,
            className,
            isSelected && `${baseClass}--selected`,
            disabled && `${baseClass}--disabled`,
            isDeleting && `${baseClass}--deleting`,
            isFocused && `${baseClass}--focused`,
            isOver && `${baseClass}--over`,
            `${baseClass}--${type}`
        ].filter(Boolean).join(' '),
        disabled: disabled || !onClick && !onKeyDown,
        onClick: onClick,
        onKeyDown: onKeyDown,
        ref: ref,
        children: [
            !disableDrop ? /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__drop-area`,
                ref: setNodeRef
            }, void 0, false, {
                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                lineNumber: 103,
                columnNumber: 23
            }, this) : null,
            type === 'file' ? /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__preview-area`,
                children: previewUrl ? /*#__PURE__*/ _jsxDEV(Thumbnail, {
                    fileSrc: previewUrl
                }, void 0, false, {
                    fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                    lineNumber: 107,
                    columnNumber: 25
                }, this) : /*#__PURE__*/ _jsxDEV(DocumentIcon, {}, void 0, false, {
                    fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                    lineNumber: 107,
                    columnNumber: 62
                }, this)
            }, void 0, false, {
                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                lineNumber: 106,
                columnNumber: 9
            }, this) : null,
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__titlebar-area`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__icon-wrap`,
                        children: type === 'file' ? /*#__PURE__*/ _jsxDEV(DocumentIcon, {}, void 0, false, {
                            fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                            lineNumber: 113,
                            columnNumber: 30
                        }, this) : /*#__PURE__*/ _jsxDEV(ColoredFolderIcon, {}, void 0, false, {
                            fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                            lineNumber: 113,
                            columnNumber: 49
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                        lineNumber: 112,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__titlebar-labels`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("p", {
                                className: `${baseClass}__name`,
                                title: title,
                                children: /*#__PURE__*/ _jsxDEV("span", {
                                    children: title
                                }, void 0, false, {
                                    fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                                    lineNumber: 117,
                                    columnNumber: 13
                                }, this)
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                                lineNumber: 116,
                                columnNumber: 11
                            }, this),
                            folderType && folderType.length > 0 ? /*#__PURE__*/ _jsxDEV(AssignedCollections, {
                                folderType: folderType
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                                lineNumber: 120,
                                columnNumber: 13
                            }, this) : null
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                        lineNumber: 115,
                        columnNumber: 9
                    }, this),
                    PopupActions ? /*#__PURE__*/ _jsxDEV(Popup, {
                        button: /*#__PURE__*/ _jsxDEV(ThreeDotsIcon, {}, void 0, false, {
                            fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                            lineNumber: 125,
                            columnNumber: 21
                        }, void 0),
                        disabled: selectedCount > 1 || selectedCount === 1 && !isSelected,
                        horizontalAlign: "right",
                        size: "large",
                        verticalAlign: "bottom",
                        children: PopupActions
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                        lineNumber: 124,
                        columnNumber: 11
                    }, this) : null
                ]
            }, void 0, true, {
                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                lineNumber: 111,
                columnNumber: 7
            }, this)
        ]
    }, itemKey, true, {
        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
        lineNumber: 84,
        columnNumber: 5
    }, this);
}
function AssignedCollections({ folderType }) {
    const { config } = useConfig();
    const { i18n } = useTranslation();
    const collectionsDisplayText = React.useMemo(()=>{
        return folderType.reduce((acc, collection)=>{
            const collectionConfig = config.collections?.find((c)=>c.slug === collection);
            if (collectionConfig) {
                return [
                    ...acc,
                    getTranslation(collectionConfig.labels.plural, i18n)
                ];
            }
            return acc;
        }, []);
    }, [
        folderType,
        config.collections,
        i18n
    ]);
    return /*#__PURE__*/ _jsxDEV("p", {
        className: `${baseClass}__assigned-collections`,
        children: collectionsDisplayText.map((label, index)=>/*#__PURE__*/ _jsxDEV("span", {
                children: [
                    label,
                    index < folderType.length - 1 ? ', ' : ''
                ]
            }, label, true, {
                fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
                lineNumber: 156,
                columnNumber: 9
            }, this))
    }, void 0, false, {
        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
        lineNumber: 154,
        columnNumber: 5
    }, this);
}
// todo: possibly remove
export function ContextFolderFileCard({ type, className, index, item }) {
    const { checkIfItemIsDisabled, focusedRowIndex, onItemClick, onItemKeyPress, selectedItemKeys } = useFolder();
    const isSelected = selectedItemKeys.has(item.itemKey);
    const isDisabled = checkIfItemIsDisabled(item);
    return /*#__PURE__*/ _jsxDEV(FolderFileCard, {
        className: className,
        disabled: isDisabled,
        folderType: item.value.folderType || [],
        id: item.value.id,
        isFocused: focusedRowIndex === index,
        isSelected: isSelected,
        itemKey: item.itemKey,
        onClick: (event)=>{
            void onItemClick({
                event,
                index,
                item
            });
        },
        onKeyDown: (event)=>{
            void onItemKeyPress({
                event,
                index,
                item
            });
        },
        previewUrl: item.value.url,
        title: item.value._folderOrDocumentTitle,
        type: type
    }, void 0, false, {
        fileName: "src/elements/FolderView/FolderFileCard/index.tsx",
        lineNumber: 178,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map