import React, { Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { components } from 'react-select';
import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer';
import Tooltip from '../../../../../elements/Tooltip';
import Edit from '../../../../../icons/Edit';
import { useAuth } from '../../../../../utilities/Auth';
import './index.scss';
const baseClass = 'relationship--multi-value-label';
export const MultiValueLabel = (props) => {
    var _a, _b, _c;
    const { data: { value, relationTo, label, }, selectProps: { setDrawerIsOpen, draggableProps, }, } = props;
    const { permissions } = useAuth();
    const [showTooltip, setShowTooltip] = useState(false);
    const { t } = useTranslation('general');
    const hasReadPermission = Boolean((_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[relationTo]) === null || _b === void 0 ? void 0 : _b.read) === null || _c === void 0 ? void 0 : _c.permission);
    const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen }] = useDocumentDrawer({
        id: value === null || value === void 0 ? void 0 : value.toString(),
        collectionSlug: relationTo,
    });
    useEffect(() => {
        if (typeof setDrawerIsOpen === 'function')
            setDrawerIsOpen(isDrawerOpen);
    }, [isDrawerOpen, setDrawerIsOpen]);
    return (React.createElement("div", { className: baseClass },
        React.createElement("div", { className: `${baseClass}__content` },
            React.createElement(components.MultiValueLabel, { ...props, innerProps: {
                    className: `${baseClass}__text`,
                    ...draggableProps || {},
                } })),
        relationTo && hasReadPermission && (React.createElement(Fragment, null,
            React.createElement(DocumentDrawerToggler, { className: `${baseClass}__drawer-toggler`, "aria-label": `Edit ${label}`, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => setShowTooltip(false) },
                React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('editLabel', { label: '' })),
                React.createElement(Edit, null)),
            React.createElement(DocumentDrawer, null)))));
};
