import React, { useCallback, useState, useEffect } from 'react';
import classNames from 'classnames';
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Button, ACCENT_TYPES, BUTTON_SIZES } from '../button';
import { TOOLTIP_DELAY_TYPES } from '../tooltip';
import { COPY_TIMEOUT } from './constants';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function CopyToClipboardButton({
  ariaLabel,
  ariaLabelledBy,
  value,
  copyTooltipText,
  copiedTooltipText,
  testId,
  className,
  isDisabled,
  copyLabel,
  onClick,
  accentType = ACCENT_TYPES.ROUND_ICON
}) {
  const [isCopied, setIsCopied] = useState(false);
  useEffect(() => {
    let timer;
    if (isCopied) {
      timer = setTimeout(() => {
        setIsCopied(false);
      }, COPY_TIMEOUT);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [isCopied]);
  const onCopy = useCallback(() => {
    navigator.clipboard.writeText(value);
    setIsCopied(true);
    if (onClick) {
      onClick();
    }
  }, [value, onClick]);
  return /*#__PURE__*/_jsxs(Button, {
    isDisabled: isDisabled,
    onClick: onCopy,
    accentType: accentType,
    size: BUTTON_SIZES.XS,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    tooltipDelayType: TOOLTIP_DELAY_TYPES.FAST,
    tooltipText: isCopied ? copiedTooltipText : copyTooltipText,
    tooltipPlacement: "top",
    className: classNames('copy-to-clipboard-btn', {
      disabled: isDisabled
    }, {
      'with-label': !!copyLabel
    }, className),
    testId: testId,
    children: [!!copyLabel && /*#__PURE__*/_jsx("span", {
      className: "copy-label",
      children: copyLabel
    }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
      icon: isCopied ? faCheck : faCopy,
      className: classNames(isCopied && 'copy-to-clipboard-icon-copied'),
      "test-id": `${testId}-icon`
    })]
  });
}