import React, { useState } from 'react';
import { classNames } from 'primereact/utils';
import { CodeHighlight } from './templates/CodeHighlight';

const BlockViewer = (props) => {
  const [blockView, setBlockView] = useState('PREVIEW');

  const copyCode = async (event) => {
    await navigator.clipboard.writeText(props.code);
    event.preventDefault();
  };

  return (
    <div className="block-viewer">
      <div className="block-section">
        <div className="block-header">
          <span className="block-title">
            <span>{props.header}</span>
            {props.new && <span className="badge-new">New</span>}
          </span>
          <div className="block-actions">
            <button
              tabIndex="0"
              className={classNames('p-link', {
                'block-action-active': blockView === 'PREVIEW',
              })}
              onClick={() => setBlockView('PREVIEW')}
            >
              <span>Preview</span>
            </button>
            <button
              className={classNames('p-link', {
                'block-action-active': blockView === 'CODE',
              })}
              onClick={() => setBlockView('CODE')}
            >
              <span>Code</span>
            </button>
            <button
              tabIndex="0"
              className="p-link block-action-copy"
              onClick={copyCode}
            >
              <i className="pi pi-copy"></i>
            </button>
          </div>
        </div>
        <div className="block-content">
          {blockView === 'PREVIEW' && (
            <div
              className={props.containerClassName}
              style={props.previewStyle}
            >
              {props.children}
            </div>
          )}

          {blockView === 'CODE' && <CodeHighlight>{props.code}</CodeHighlight>}
        </div>
      </div>
    </div>
  );
};

export default BlockViewer;