/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {useState} from 'react';
import {faCopy, faCheck} from '@fortawesome/free-solid-svg-icons';
import IconButton from 'components/buttons/icon-button';

import {CopyButtonContainer} from './styles';

const iconChangeTimeout = 2000;

export const CopyIconButton = (props: {text: string; quoted?: boolean; displayText?: boolean; className?: string}): React.JSX.Element => {
  const {text, quoted = false, displayText = true, className} = props;
  const [copied, setCopied] = useState(false);
  const copyToClipboard = (): void => {
    navigator.clipboard.writeText(text);
    setCopied(true);

    setTimeout(() => setCopied(false), iconChangeTimeout);
  };

  return (
    <CopyButtonContainer className={className}>
      {displayText && (quoted ? `"${text}"` : text)}
      <IconButton onClick={copyToClipboard} tooltipText="Copy" icon={copied ? faCheck : faCopy} />
    </CopyButtonContainer>
  );
};
