import { formatFilesize } from 'payload/utilities';
import React, { useState } from 'react';
import { Edit } from '../../../icons/Edit/index.js';
import CopyToClipboard from '../../CopyToClipboard/index.js';
import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
import { Tooltip } from '../../Tooltip/index.js';
const baseClass = 'file-meta';
const FileMeta = (props)=>{
    const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props;
    const [hovered, setHovered] = useState(false);
    const openInDrawer = Boolean(id && collection);
    const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
        id,
        collectionSlug: collection
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__url`
    }, openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawer, null), /*#__PURE__*/ React.createElement("a", {
        href: fileURL,
        rel: "noopener noreferrer",
        target: "_blank"
    }, filename), /*#__PURE__*/ React.createElement(CopyToClipboard, {
        defaultMessage: "Copy URL",
        value: fileURL
    }), openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
        className: `${baseClass}__edit`,
        onMouseEnter: ()=>setHovered(true),
        onMouseLeave: ()=>setHovered(false)
    }, /*#__PURE__*/ React.createElement(Edit, null), /*#__PURE__*/ React.createElement(Tooltip, {
        show: hovered
    }, "Edit"))), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__size-type`
    }, formatFilesize(filesize), width && height && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", width, "x", height), mimeType && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", mimeType)));
};
export default FileMeta;

//# sourceMappingURL=index.js.map