text: import React from 'react';
  import { Modal, Button, Dropdown, Label } from 'semantic-ui-react';
  import * as Tools from '../utils/Tools';
  import Loading from "./Loading";
  import useCodeHighlighting from './hooks/useCodeHighlighting';
  
  export default function SourceCode(props) {
    const codeEl = useCodeHighlighting([props.sourceCode, props.sourceCodeVisible], props.sourceCodeVariable ?.keyword);
  
    function handleClose() {
      props.onCloseSourceCode();
    }
  
    if (!props.sourceCodeVariable || !props.sourceCodeRepo) { return null; }
    const sourceCodeVariable = props.sourceCodeVariable;
    const dropText = (
      <div>All Codes <Label size='mini' circular color={sourceCodeVariable.color}>
        {sourceCodeVariable.repoList.length}
      </Label></div>
    );
    const dropdownItems = props.sourceCodeVariable && props.sourceCodeVariable.repoList.map(repo => {
      return (
        <Dropdown.Item key={Tools.uuid()}>
          <Button size='mini' onClick={() => props.onRequestSourceCode(repo)}>Codes</Button>
          <Button size='mini' as='a' href={repo.repo} target='_blank'>Repo</Button>
          <Label size='mini' circular color={Tools.randomLabelColor()}>{repo.language}</Label>
        </Dropdown.Item>
      )
    });
    return (
      <Modal open={props.sourceCodeVisible} onClose={handleClose}
        centered={false} closeIcon className='source-code fix-modal' size='large'>
        <Modal.Header>
          <Dropdown floating labeled button blurring className='mini icon' style={{ padding: '0.35rem 0' }}
            text={dropText}>
            <Dropdown.Menu>
              <Dropdown.Menu scrolling className='fix-dropdown-menu'>
                {dropdownItems}
              </Dropdown.Menu>
            </Dropdown.Menu>
          </Dropdown>
          <Button size='mini' as='a' href={props.sourceCodeRepo.repo} target='_blank'>Repo</Button>
        </Modal.Header>
        <Modal.Content>
          {props.sourceCodeRequesting ? <Loading /> : ''}
          <pre><code className='prettyprint linenums' ref={codeEl}>{props.sourceCode}</code></pre>
        </Modal.Content>
      </Modal>
    )
  }
  