import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useState } from 'react';
import { useI18n } from '../../../i18n';
import { FcrToolTip } from '../../tooltip';
import { ActionBarItem } from '../item';
import { FcrIconType } from '../../icon/type';
import { jsx as _jsx } from "react/jsx-runtime";
export var Participants = function Participants(_ref) {
  var id = _ref.id,
    order = _ref.order;
  var t = useI18n();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    tooltipVisible = _useState2[0],
    setTooltipVisible = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    dialogTooltipVisible = _useState4[0],
    setDialogTooltipVisible = _useState4[1];
  var userCount = 0;
  var title = t('fmt_role_label_participants');
  var tooltip = t('fmt_role_label_participants');
  return /*#__PURE__*/_jsx(FcrToolTip, {
    visible: tooltipVisible,
    onVisibleChange: function onVisibleChange(visible) {
      if (dialogTooltipVisible) {
        setTooltipVisible(false);
      } else {
        setTooltipVisible(visible);
      }
    },
    content: tooltip,
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-action-bar-participants-wrapper",
      children: /*#__PURE__*/_jsx(ActionBarItem, {
        id: id,
        order: order,
        onClick: function onClick() {},
        icon: FcrIconType.FCR_PEOPLE,
        iconColors: {
          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
        },
        title: title
      })
    })
  });
};