import React from 'react';
import classnames from 'classnames';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { TextWithHyperlinks } from '../text-with-hyperlinks';
import { Button, ACCENT_TYPES, BUTTON_SIZES } from '../button';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const TextMode = ({
  className = 'text',
  startEditing,
  value,
  isMultiline,
  isDisabled,
  isLoading,
  buttonLabel,
  buttonTooltip,
  placeholder,
  areHyperLinksClickable,
  buttonTestId = 'edit-text-button',
  buttonAriaLabel
}) => {
  const {
    t
  } = useTranslation();
  const editButton = /*#__PURE__*/_jsxs(Button, {
    accentType: buttonLabel ? ACCENT_TYPES.COMMAND : ACCENT_TYPES.ROUND_ICON,
    className: 'edit-button',
    isDisabled: isDisabled || isLoading,
    "aria-label": buttonAriaLabel ?? t('Edit'),
    onClick: startEditing,
    tooltipText: buttonTooltip,
    testId: buttonTestId,
    tourId: "edit-text",
    size: buttonLabel ? BUTTON_SIZES.SM : undefined,
    children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: isLoading ? faCircleNotch : faPen,
      spin: isLoading,
      "test-id": "is-loading-icon"
    }), buttonLabel ? /*#__PURE__*/_jsx("span", {
      children: buttonLabel
    }) : null]
  });
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsxs("div", {
      className: classnames('edit-text-label', className, {
        'edit-text-label-truncated-wrapper': !isMultiline
      }),
      children: [/*#__PURE__*/_jsx("span", {
        "test-id": "edit-text-label",
        className: classnames({
          'edit-text-label-truncated': !isMultiline
        }),
        children: (areHyperLinksClickable && value ? /*#__PURE__*/_jsx(TextWithHyperlinks, {
          value: value.toString()
        }) : value) || placeholder
      }), editButton]
    })
  });
};
export default TextMode;