text: const noise1Png = require('./noise1');
  const noise2Png = require('./noise2');
  const noise3Png = require('./noise3');
  const HUE_SHIFT_INTENSITY = 4;
  const BRIGHT_GREEN = '#28FC91';
  const DARK_GREEN = 'transparent';
  const TEXT_GREEN = '51, 255, 0';
  
  exports.decorateConfig = (config) => {
    return Object.assign({}, config, {
      foregroundColor: BRIGHT_GREEN,
      backgroundColor: transparent,
      borderColor: BRIGHT_GREEN,
      cursorColor: '#40FFFF',
    });
  }
  
  exports.decorateHyper = (HyperTerm, {
    React,
    notify
  }) => {
    return class extends React.Component {
      constructor(props, context) {
        super(props, context);
        this.state = {
          noise: 0
        };
        this._flip = this._flip.bind(this);
        this._intervalID = null;
      }
  
      _flip() {
        this.setState({
          noise: (this.state.noise + 1) % 3
        });
      }
  
      componentWillMount() {
        this._intervalID = setInterval(this._flip, 120);
      }
  
      render() {
        const noisePng = [noise1Png, noise2Png, noise3Png][this.state.noise];
        const noiseCss = `
          background-image: ${noisePng};
          background-size: 100px 100px;
        `;
        const textShadow = generateTextShadow();
  
        const overridenProps = {
          backgroundColor: 'transparent',
          customCSS: `
            ${this.props.customCSS || ''}
            body {
              ${noiseCss}
            }
            .hyper_main {
              ${noiseCss}
            }
            .term_fit {
              ${noiseCss}
            }
            .term_wrapper {
              ${noiseCss}
            }
            .xterm_screen {
              ${noiseCss}
          }
            .tabs_nav {
              ${noiseCss}
            }
            .tabs_nav .tabs_title {
              color: rgb(${TEXT_GREEN}) !important;
              font-weight: bold !important;
              ${textShadow}
            }
            .tabs_list {
              background-color: ${DARK_GREEN} !important;
              background-image: none !important;
            }
            .tab_tab {
              border-width: 0px !important;
              border-right: 0px solid transparent !important;
              border-left: 1px solid ${BRIGHT_GREEN} !important;
            }
            .tab_tab:not(.tab_active) {
              color: rgba(${TEXT_GREEN}, 0.7);
            }
            .tab_tab.tab_active {
              height: calc(100% + 1px);
              ${noiseCss}
              border-left: 0px solid ${BRIGHT_GREEN} !important;
              ${textShadow}
              font-weight: bold;
              color: rgb(${TEXT_GREEN});
            }
            /* Hide hardcoded black bottom border */
            .tab_active:before {
              border-bottom: none !important;
              border-left: 1px solid transparent !important;
            }
          `,
        };
        return React.createElement(HyperTerm, Object.assign({}, this.props, overridenProps));
      }
  
      componentWillUnmount() {
        clearInterval(this._intervalID);
      }
    }
  }
  
  
  
  exports.decorateTerm = (Term, {
    React,
    notify
  }) => {
    return class extends React.Component {
      constructor(props, context) {
        super(props, context);
        this._drawFrame = this._drawFrame.bind(this);
        this._onTerminal = this._onTerminal.bind(this);
        this._injectStyles = this._injectStyles.bind(this);
        this._div = null;
        this._body = null;
        this._globalStyle = null;
        this._term = null;
        this._intervalID = null;
      }
  
      _onTerminal(term) {
        if (this.props.onTerminal) this.props.onTerminal(term);
        this._div = term.div_;
        this._term = term;
        this._body = term.cursorNode_.parentElement;
        this._window = term.document_.defaultView;
        this._injectStyles();
        this._intervalID = setInterval(() => {
          this._window.requestAnimationFrame(this._drawFrame);
        }, 80);
      }
  
  
  
      _injectStyles() {
        if (this._term) {
          this._term.prefs_.set('background-color', 'transparent');
          this._term.prefs_.set('background-image', 'none');
        }
        this._globalStyle = document.createElement('style');
        this._globalStyle.setAttribute('type', 'text/css');
        this._term.scrollPort_.document_.body.appendChild(this._globalStyle);
      }
  
      _drawFrame() {
        this._globalStyle.innerHTML = `
          x-screen {
            ${generateTextShadow()}
          }
        `;
      }
  
      render() {
        return React.createElement(Term, Object.assign({}, this.props, {
          onTerminal: this._onTerminal
        }));
      }
  
      componentWillUnmount() {
        clearInterval(this._intervalID);
      }
  
  
      // _onDecorated(term) {
      //   const xTermInstance = term.term;
  
      //   // don't know why it doesn't work without setTimeout
      //   setTimeout(() => {
      //     // needed if you have a fully opaque hyper backgroundColor, set in .hyper.js
      //     xTermInstance.setOption('allowTransparency', true);
  
      //     xTermInstance.setOption('theme', {
      //       background: 'rgba(0,0,0,0)'
      //     });
      //   }, 0);
      // }
    }
  
  
  };
  
  function generateTextShadow() {
    let x = -1 + 2 * Math.random();
    x = x * x;
    const intensity = HUE_SHIFT_INTENSITY * x;
    return `text-shadow: ${intensity}px 0 1px rgba(0,30,255,0.5), ${-intensity}px 0 1px rgba(255,0,80,0.3), 0 0 3px !important;`
  }