'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { Fragment, useState } from 'react';
import { components as SelectComponents } 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--single-value';
export const SingleValue = // TODO Fix this - moduleResolution 16 breaks our declare module
(props)=>{
    const { children, data: { allowEdit, label, relationTo, value }, selectProps: { customProps: { onDocumentOpen } = {} } = {} } = props;
    const [showTooltip, setShowTooltip] = useState(false);
    const { t } = useTranslation();
    const { permissions } = useAuth();
    const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read);
    return /*#__PURE__*/ _jsxDEV(SelectComponents.SingleValue, {
        ...props,
        className: baseClass,
        children: /*#__PURE__*/ _jsxDEV("div", {
            className: `${baseClass}__label`,
            title: label || '',
            children: /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__label-text`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__text`,
                        children: children
                    }, void 0, false, {
                        fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                        lineNumber: 41,
                        columnNumber: 11
                    }, this),
                    relationTo && hasReadPermission && allowEdit !== false && /*#__PURE__*/ _jsxDEV(Fragment, {
                        children: /*#__PURE__*/ _jsxDEV("button", {
                            "aria-label": t('general:editLabel', {
                                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 openingtype="button"
                            type: "button",
                            children: [
                                /*#__PURE__*/ _jsxDEV(Tooltip, {
                                    className: `${baseClass}__tooltip`,
                                    show: showTooltip,
                                    children: t('general:edit')
                                }, void 0, false, {
                                    fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                                    lineNumber: 67,
                                    columnNumber: 17
                                }, this),
                                /*#__PURE__*/ _jsxDEV(EditIcon, {}, void 0, false, {
                                    fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                                    lineNumber: 70,
                                    columnNumber: 17
                                }, this)
                            ]
                        }, void 0, true, {
                            fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                            lineNumber: 44,
                            columnNumber: 15
                        }, this)
                    }, void 0, false, {
                        fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                        lineNumber: 43,
                        columnNumber: 13
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
                lineNumber: 40,
                columnNumber: 9
            }, this)
        }, void 0, false, {
            fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
            lineNumber: 39,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/fields/Relationship/select-components/SingleValue/index.tsx",
        lineNumber: 38,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map