'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { Button } from '../../Button/index.js';
import { Thumbnail } from '../../Thumbnail/index.js';
import './index.scss';
const baseClass = 'file-details-draggable';
import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
import { EditIcon } from '../../../icons/Edit/index.js';
import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
export const DraggableFileDetails = (props)=>{
    const { collectionSlug, doc, hideRemoveFile, imageCacheTag, isSortable, removeItem, rowIndex, uploadConfig } = props;
    const { id, filename, thumbnailURL, url } = doc;
    const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
        id,
        collectionSlug
    });
    return /*#__PURE__*/ _jsxDEV(DraggableSortableItem, {
        id: id,
        children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsxDEV("div", {
                className: [
                    baseClass,
                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`
                ].filter(Boolean).join(' '),
                ref: draggableSortableItemProps.setNodeRef,
                style: {
                    transform: draggableSortableItemProps.transform,
                    transition: draggableSortableItemProps.transition,
                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
                },
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}--drag-wrapper`,
                        children: [
                            isSortable && draggableSortableItemProps && /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__drag`,
                                ...draggableSortableItemProps.attributes,
                                ...draggableSortableItemProps.listeners,
                                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
                                    fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                    lineNumber: 77,
                                    columnNumber: 17
                                }, this)
                            }, void 0, false, {
                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                lineNumber: 72,
                                columnNumber: 15
                            }, this),
                            /*#__PURE__*/ _jsxDEV(Thumbnail, {
                                className: `${baseClass}__thumbnail`,
                                collectionSlug: collectionSlug,
                                doc: doc,
                                fileSrc: thumbnailURL || url,
                                imageCacheTag: imageCacheTag,
                                uploadConfig: uploadConfig
                            }, void 0, false, {
                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                lineNumber: 80,
                                columnNumber: 13
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                        lineNumber: 70,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__main-detail`,
                        children: filename
                    }, void 0, false, {
                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                        lineNumber: 89,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__actions`,
                        children: [
                            /*#__PURE__*/ _jsxDEV(DocumentDrawer, {}, void 0, false, {
                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                lineNumber: 92,
                                columnNumber: 13
                            }, this),
                            /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
                                children: /*#__PURE__*/ _jsxDEV(EditIcon, {}, void 0, false, {
                                    fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                    lineNumber: 94,
                                    columnNumber: 15
                                }, this)
                            }, void 0, false, {
                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                lineNumber: 93,
                                columnNumber: 13
                            }, this),
                            !hideRemoveFile && removeItem && /*#__PURE__*/ _jsxDEV(Button, {
                                buttonStyle: "icon-label",
                                className: `${baseClass}__remove`,
                                icon: "x",
                                iconStyle: "none",
                                onClick: ()=>removeItem(rowIndex),
                                round: true
                            }, void 0, false, {
                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                                lineNumber: 97,
                                columnNumber: 15
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                        lineNumber: 91,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
                lineNumber: 56,
                columnNumber: 9
            }, this)
    }, id, false, {
        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
        lineNumber: 54,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map