import React from 'react';
import { uniqueId } from 'lodash-es';
import classNames from 'classnames';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { FontAwesomeIcon } from '../../font-awesome-icon';
import { BUTTON_TYPES } from '../../button';
import { Tooltip } from '../../tooltip';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function MultiSelectLabel({
  value,
  onDelete,
  disabled = false,
  tooltip,
  isReadOnlyItem = false,
  isInvalid = false,
  removeLabelText
}) {
  const key = uniqueId('remove-');
  return /*#__PURE__*/_jsx(Tooltip, {
    content: tooltip,
    children: /*#__PURE__*/_jsxs("span", {
      className: classNames('multi-select-label', {
        disabled,
        'is-invalid': isInvalid
      }),
      "test-id": "multi-select-label",
      id: key,
      children: [/*#__PURE__*/_jsx("span", {
        className: "label-name",
        "test-id": "multi-select-label-name",
        children: value
      }), !(isReadOnlyItem || disabled) && /*#__PURE__*/_jsx("button", {
        type: BUTTON_TYPES.BUTTON,
        className: "button command remove-button",
        onClick: () => onDelete(value),
        "test-id": "remove-button",
        "aria-label": removeLabelText,
        "data-id": value,
        disabled: disabled,
        "aria-labelledby": key,
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faXmark
        })
      })]
    })
  });
}
export default MultiSelectLabel;