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

import IconButton from 'components/buttons/icon-button';

import {CodeContainer} from './styles';

interface IPreFormattedCode {
  data: Record<string, any> | Array<any>; // eslint-disable-line
  prefixCharacter?: string;
  color?: string;
  showCopyIcon?: boolean;
}

const iconChangeTimeout = 2000;
const PreFormattedCode = ({data, prefixCharacter, color, showCopyIcon = true}: IPreFormattedCode): React.JSX.Element => {
  const [copied, setCopied] = useState(false);
  const json = JSON.stringify(data, null, 2);
  const lines = json.split('\n');
  const text = lines.map(line => line.replace(/^< /, '')).join('\n');
  const copyJsonToClipboard = (text: string): void => {
    navigator.clipboard.writeText(text);
    setCopied(true);

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

  const handleCopy = event => {
    const originalString = event.target.textContent;
    const modifiedString = originalString.replace(/[<>]/g, '');

    event.clipboardData.setData('text/plain', modifiedString);
    event.preventDefault();
  };

  const handleCopyIconClick = () => copyJsonToClipboard(text);

  return (
    <CodeContainer color={color}>
      <pre>
        <code onCopy={handleCopy}>
          {lines.map((line, index) => (
            <Fragment key={index}>
              {prefixCharacter} {line} <br />
              {index === lines.length - 1 && prefixCharacter}
            </Fragment>
          ))}
        </code>
      </pre>
      {showCopyIcon && <IconButton onClick={handleCopyIconClick} tooltipText="Copy" icon={copied ? faCheck : faCopy} />}
    </CodeContainer>
  );
};

export default PreFormattedCode;