import React, { Component } from 'react';
import AnimationSpeedSelector from './AnimationSpeedSelector';
import UndoRedoCreator from '../containers/UndoRedo';
import UserAction from './UserAction';
import * as styles from '../styles/Home.scss';

export default class Header extends Component {

  componentDidMount() {
    if (this.props.headerType === 'code') {
      const highlightInterval = setInterval(() => {
        this.props.toggleHelpHighlight();
      }, 500);
      setTimeout(() => clearInterval(highlightInterval), 3000);
    }
  }

  changeDelay(change) {
    const { delay, setDelay } = this.props;
    const newDelay = Math.max(0, delay + change);
    setDelay(newDelay);
  }

  render() {
    const {
      dataType,
      runCode,
      delay,
      openTutorial,
      highlightHelp,
      tutorialActive,
      closeTutorial,
      darkenTheme,
      lightenTheme,
      themeIndex,
      themeOptions,
      headerType,
      execute
    } = this.props;
    const UndoRedo = UndoRedoCreator(dataType);
    const backdropClass = tutorialActive ? styles.backdrop : styles.hidden;
    const helpClass = highlightHelp ? styles.highlighted : styles.helpButton;
    return (
      <div className={styles.header}>
        <div className={backdropClass} onClick={closeTutorial} />
        <UndoRedo />
        <AnimationSpeedSelector delay={delay} changeDelay={this.changeDelay.bind(this)} />
        {headerType === 'code' ?
          (<div>
            <span className={styles.button_info}>Editor Theme</span>
            <button
              className={styles.darkerButton}
              onClick={darkenTheme}
              disabled={!themeIndex}
            >Darker</button>
            <button
              className={styles.lighterButton}
              onClick={lightenTheme}
              disabled={themeIndex >= themeOptions - 1}
            >Lighter</button>
          </div>) : <UserAction buttonAction={execute} />
        }
        {headerType === 'code' ?
          <div className={styles.leftButtons} >
            <button className={styles.runButton} onClick={runCode}>Run</button>
            <button className={helpClass} onClick={openTutorial}>Help</button>
          </div> : null
        }
      </div>
    );
  }
}
@@ -35,16 +35,53 @@
 react';%0A
+import %7B Link %7D from 'react-router';%0A
 import A
@@ -793,16 +793,31 @@
  delay,%0A
+      delayed,%0A
       op
@@ -1353,18 +1353,143 @@
    %3C
-UndoRedo /
+div className=%7Bstyles.rightButtons%7D%3E%0A          %3CLink to='/'%3E%3Cdiv className=%7Bstyles.logo%7D /%3E%3C/Link%3E%0A          %3CUndoRedo /%3E%0A        %3C/div
 %3E%0A  
@@ -2108,16 +2108,38 @@
 execute%7D
+ asyncActive=%7Bdelayed%7D
  /%3E%0A    
@@ -2214,11 +2214,12 @@
 les.
-lef
+righ
 tBut
@@ -2274,16 +2274,35 @@
 nButton%7D
+ disabled=%7Bdelayed%7D
  onClick

Add logo in header