'use client';
import React, { Fragment, useEffect, useState } from 'react';
import { components } 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--multi-value-label';
export const MultiValueLabel = (props)=>{
    const { data: { label, relationTo, value }, selectProps: { // @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
    customProps: { // @ts-ignore-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
    draggableProps, // @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
    setDrawerIsOpen } = {} } = {} } = props;
    const { permissions } = useAuth();
    const [showTooltip, setShowTooltip] = useState(false);
    const { t } = useTranslation();
    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("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__content`
    }, /*#__PURE__*/ React.createElement(components.MultiValueLabel, {
        ...props,
        innerProps: {
            className: `${baseClass}__text`,
            ...draggableProps || {}
        }
    })), relationTo && hasReadPermission && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
        "aria-label": `Edit ${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:editLabel', {
        label: ''
    })), /*#__PURE__*/ React.createElement(Edit, null)), /*#__PURE__*/ React.createElement(DocumentDrawer, {
        onSave: null
    })));
};

//# sourceMappingURL=index.js.map