content: import React from 'react';
  import { resolve } from '../utils/styles';
  import { connect } from 'react-redux';
  import { setSiteState } from '../redux/modules/site';
  // Container Elements
  import Cube from './Cube';
  // Less for CSS Modules
  import HackerStyles from './Hacker.less';
  import CubeStyles from './Cube.less';
  
  /**
  
      ▄▄▄█████▓ ██░ ██ ▓█████     ██░ ██  ▄▄▄       ▄████▄   ██ ▄█▀▓█████ ▒██▀███
      ▓  ██▒ ▓▒▓██░ ██▒▓█   ▀    ▓██░ ██▒▒████▄    ▒██▀ ▀█   ██▄█▒ ▓█   ▀ ▒▓█ ▒ ██▒
      ▒ ▒▓█░ ▒░▒██▀▀██░▒███      ▒██▀▀██░▒██  ▀█▄  ▒▓█    ▄ ▓███▄░ ▒███    ▓█ ░▄█ ▒
      ░ ▓██▓ ░ ░▓█ ░██ ▒▓█  ▄    ░▓█ ░██ ░██▄▄▄▄██ ▒▓▓▄ ▄██▒▓██ █▄ ▒▓█  ▄ ▒███▀▀█▄
        ▒██▒ ░ ░▓█▒░██▓░▒████▒   ░▓█▒░██▓ ▓█   ▓██▒  ▒▓█▒▀ ░▒██▒ █▄░▒████▒░██▓ ▒██▒
        ▒ ░░    ▒ ░░▒░▒░░ ▒░ ░    ▒ ░░▒░▒ ▒▒   ▓▒█░░ ░▒ ▒  ░▒ ▒▒ ▓▒░░ ▒░ ░░ ▒▓ ░▒▓░
          ░     ▒ ░▒░ ░ ░ ░  ░    ▒ ░▒░ ░  ▒   ▒▒ ░  ░  ▒   ░ ░▒ ▒░ ░ ░  ░  ░▒ ░ ▒░
        ░       ░  ░░ ░   ░       ░  ░░ ░  ░   ▒   ░        ░ ░░ ░    ░     ░░   ░
                ░  ░  ░   ░  ░    ░  ░  ░      ░  ░░ ░      ░  ░      ░  ░   ░
                                                   ░
  
        'the Hacker' is an experimental website in design and user interaction.
        email: pjkarlik@gmail.com // repository: github.com/pjkarlik
  
  */
  
  class Hacker extends React.Component {
    static displayName = 'Hacker';
    static propTypes = {
      /** CSS Modules Object **/
      classes: React.PropTypes.object,
      /** Modules Props **/
      navigationIsOpen: React.PropTypes.bool,
      transition: React.PropTypes.string,
      /** Redux Actions **/
      setSiteState: React.PropTypes.func
    };
    static defaultProps = {
      classes: HackerStyles
    };
    componentDidMount() {
      if (this.props.transition === 'out') {
        setTimeout(() => {
          this.props.setSiteState({
            transition: 'in'
          });
        }, 100);
      }
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.transition !== this.props.transition) {
        this.props.setSiteState({
          transition: this.props.transition === 'in' ? 'out' : 'in'
        });
      }
      if (nextProps.navigationIsOpen !== this.props.navigationIsOpen) {
        this.props.setSiteState({
          transition: this.props.transition === 'in' ? 'out' : 'in'
        });
      }
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }
    render() {
      const { navigationIsOpen, classes } = this.props;
      const background = (
        <div {...resolve(this.props, navigationIsOpen ? null : 'circleEffect')} />
      );
      return (
        <div className={classes.container}>
          {background}
          <Cube
            interactive
            initialX={-42}
            classes={CubeStyles}>
            <div className={CubeStyles.front}>J</div>
            <div className={CubeStyles.back}>pjkarlik@gmail.com</div>
            <div className={CubeStyles.right}>K</div>
            <div className={CubeStyles.left}>P</div>
            <div className={CubeStyles.top}>user interface architect</div>
            <div className={CubeStyles.bottom}>front-end developer</div>
          </Cube>
        </div>
      );
    }
  }
  export default connect((state) => {
    return {
      navigationIsOpen: state.site.navigationIsOpen,
      transition: state.site.transition
    };
  }, { setSiteState })(Hacker);
  