'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { Fragment, useState } from 'react';
import { components } from 'react-select';
import { Tooltip } from '../../../../elements/Tooltip/index.js';
import { EditIcon } from '../../../../icons/Edit/index.js';
import { useAuth } from '../../../../providers/Auth/index.js';
import { useTranslation } from '../../../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'relationship--multi-value-label';
export const MultiValueLabel = // TODO Fix this - moduleResolution 16 breaks our declare module
(props)=>{
    const { data: { allowEdit, label, relationTo, value }, selectProps: { customProps: { draggableProps, onDocumentOpen } = {} } = {} } = props;
    const { permissions } = useAuth();
    const [showTooltip, setShowTooltip] = useState(false);
    const { t } = useTranslation();
    const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        title: label || '',
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__content`,
                children: /*#__PURE__*/ _jsxDEV(components.MultiValueLabel, {
                    ...props,
                    innerProps: {
                        className: `${baseClass}__text`,
                        ...draggableProps || {}
                    }
                }, void 0, false, {
                    fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                    lineNumber: 39,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                lineNumber: 38,
                columnNumber: 7
            }, this),
            relationTo && hasReadPermission && allowEdit !== false && /*#__PURE__*/ _jsxDEV(Fragment, {
                children: /*#__PURE__*/ _jsxDEV("button", {
                    "aria-label": `Edit ${label}`,
                    className: `${baseClass}__drawer-toggler`,
                    onClick: (event)=>{
                        setShowTooltip(false);
                        onDocumentOpen({
                            id: value,
                            collectionSlug: relationTo,
                            hasReadPermission,
                            openInNewTab: event.metaKey || event.ctrlKey
                        });
                    },
                    onKeyDown: (e)=>{
                        if (e.key === 'Enter') {
                            e.stopPropagation();
                        }
                    },
                    onMouseDown: (e)=>e.stopPropagation(),
                    // prevents react-select dropdown from opening
                    onMouseEnter: ()=>setShowTooltip(true),
                    onMouseLeave: ()=>setShowTooltip(false),
                    onTouchEnd: (e)=>e.stopPropagation(),
                    // prevents react-select dropdown from opening
                    type: "button",
                    children: [
                        /*#__PURE__*/ _jsxDEV(Tooltip, {
                            className: `${baseClass}__tooltip`,
                            show: showTooltip,
                            children: t('general:editLabel', {
                                label: ''
                            })
                        }, void 0, false, {
                            fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                            lineNumber: 72,
                            columnNumber: 13
                        }, this),
                        /*#__PURE__*/ _jsxDEV(EditIcon, {
                            className: `${baseClass}__icon`
                        }, void 0, false, {
                            fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                            lineNumber: 75,
                            columnNumber: 13
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                    lineNumber: 49,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
                lineNumber: 48,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Relationship/select-components/MultiValueLabel/index.tsx",
        lineNumber: 37,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map