'use client';
import React, { Fragment, useEffect, useState } from 'react';
import { components as SelectComponents } from 'react-select';
import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer/index.js';
import { Tooltip } from '../../../../../elements/Tooltip/index.js';
import { Edit } from '../../../../../icons/Edit/index.js';
import { useAuth } from '../../../../../providers/Auth/index.js';
import { useTranslation } from '../../../../../providers/Translation/index.js';
const baseClass = 'relationship--single-value';
export const SingleValue = (props)=>{
    const { children, data: { label, relationTo, value }, // @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
    selectProps: { customProps: { onSave, setDrawerIsOpen } = {} } = {} } = props;
    const [showTooltip, setShowTooltip] = useState(false);
    const { t } = useTranslation();
    const { permissions } = useAuth();
    const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read?.permission);
    const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen }] = useDocumentDrawer({
        id: value.toString(),
        collectionSlug: relationTo
    });
    useEffect(()=>{
        if (typeof setDrawerIsOpen === 'function') {
            setDrawerIsOpen(isDrawerOpen);
        }
    }, [
        isDrawerOpen,
        setDrawerIsOpen
    ]);
    return /*#__PURE__*/ React.createElement(SelectComponents.SingleValue, {
        ...props,
        className: baseClass
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__label`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__label-text`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__text`
    }, children), relationTo && hasReadPermission && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
        "aria-label": t('general:editLabel', {
            label
        }),
        className: `${baseClass}__drawer-toggler`,
        onClick: ()=>setShowTooltip(false),
        onMouseDown: (e)=>e.stopPropagation(),
        onMouseEnter: ()=>setShowTooltip(true),
        onMouseLeave: ()=>setShowTooltip(false),
        onTouchEnd: (e)=>e.stopPropagation()
    }, /*#__PURE__*/ React.createElement(Tooltip, {
        className: `${baseClass}__tooltip`,
        show: showTooltip
    }, t('general:edit')), /*#__PURE__*/ React.createElement(Edit, null))))), relationTo && hasReadPermission && /*#__PURE__*/ React.createElement(DocumentDrawer, {
        onSave: onSave
    }));
};

//# sourceMappingURL=index.js.map