'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import { formatFilesize } from 'payload/shared';
import React from 'react';
import { Button } from '../../../elements/Button/index.js';
import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js';
import { Pill } from '../../../elements/Pill/index.js';
import { ThumbnailComponent } from '../../../elements/Thumbnail/index.js';
import './index.scss';
import { useConfig } from '../../../providers/Config/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
const baseClass = 'upload-relationship-details';
export function RelationshipContent(props) {
    const { id, allowEdit, allowRemove, alt, byteSize, className, collectionSlug, displayPreview, filename, mimeType, onRemove, reloadDoc, showCollectionSlug = false, src, thumbnailSrc, withMeta = true, x, y } = props;
    const { config } = useConfig();
    const { i18n } = useTranslation();
    const collectionConfig = 'collections' in config ? config.collections.find((collection)=>collection.slug === collectionSlug) : undefined;
    const [DocumentDrawer, _, { openDrawer }] = useDocumentDrawer({
        id: id ?? undefined,
        collectionSlug
    });
    const onSave = React.useCallback(async ({ doc })=>reloadDoc(doc.id, collectionSlug), [
        reloadDoc,
        collectionSlug
    ]);
    function generateMetaText(mimeType, size) {
        const sections = [];
        if (size) {
            sections.push(formatFilesize(size));
        }
        if (x && y) {
            sections.push(`${x}x${y}`);
        }
        if (mimeType) {
            sections.push(mimeType);
        }
        return sections.join(' — ');
    }
    const metaText = withMeta ? generateMetaText(mimeType, byteSize) : '';
    const previewAllowed = displayPreview ?? collectionConfig?.upload?.displayPreview ?? true;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' '),
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__imageAndDetails`,
                children: [
                    previewAllowed && /*#__PURE__*/ _jsxDEV(ThumbnailComponent, {
                        alt: alt,
                        className: `${baseClass}__thumbnail`,
                        filename: filename,
                        fileSrc: thumbnailSrc,
                        size: "small"
                    }, void 0, false, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 104,
                        columnNumber: 11
                    }, this),
                    showCollectionSlug && collectionConfig ? /*#__PURE__*/ _jsxDEV(Pill, {
                        size: "small",
                        children: getTranslation(collectionConfig.labels.singular, i18n)
                    }, void 0, false, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 113,
                        columnNumber: 11
                    }, this) : null,
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__details`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("p", {
                                className: `${baseClass}__filename`,
                                children: src ? /*#__PURE__*/ _jsxDEV("a", {
                                    href: src,
                                    target: "_blank",
                                    children: filename
                                }, void 0, false, {
                                    fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                                    lineNumber: 118,
                                    columnNumber: 15
                                }, this) : filename
                            }, void 0, false, {
                                fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                                lineNumber: 116,
                                columnNumber: 11
                            }, this),
                            withMeta ? /*#__PURE__*/ _jsxDEV("p", {
                                className: `${baseClass}__meta`,
                                children: metaText
                            }, void 0, false, {
                                fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                                lineNumber: 125,
                                columnNumber: 23
                            }, this) : null
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 115,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                lineNumber: 102,
                columnNumber: 7
            }, this),
            allowEdit !== false || allowRemove !== false ? /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__actions`,
                children: [
                    allowEdit !== false ? /*#__PURE__*/ _jsxDEV(Button, {
                        buttonStyle: "icon-label",
                        className: `${baseClass}__edit`,
                        icon: "edit",
                        iconStyle: "none",
                        onClick: openDrawer
                    }, void 0, false, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 132,
                        columnNumber: 13
                    }, this) : null,
                    allowRemove !== false ? /*#__PURE__*/ _jsxDEV(Button, {
                        buttonStyle: "icon-label",
                        className: `${baseClass}__remove`,
                        icon: "x",
                        iconStyle: "none",
                        onClick: ()=>onRemove()
                    }, void 0, false, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 141,
                        columnNumber: 13
                    }, this) : null,
                    /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                        onSave: onSave
                    }, void 0, false, {
                        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                        lineNumber: 149,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Upload/RelationshipContent/index.tsx",
                lineNumber: 130,
                columnNumber: 9
            }, this) : null
        ]
    }, void 0, true, {
        fileName: "src/fields/Upload/RelationshipContent/index.tsx",
        lineNumber: 101,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map