import React from 'react';
import classnames from 'classnames';
import Immutable from 'immutable';

export default class Tutorials extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shape: null,
      sides: {
        left: null,
        top: null,
        right: null,
        bottom: null
      }
    };
  }
  componentWillMount() {
    console.log(this.state); // eslint-disable-line no-console
    window.addEventListener('resize', () => this.transformShape(this.props.x, this.props.y, this.props.s), false);
  }
  componentWillReceiveProps(nextProps) {
    this.transformShape(nextProps.x, nextProps.y, nextProps.s);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', () => this.transformShape(this.props.x, this.props.y, this.props.s), false);
  }
  transformShape(x, y, s) {
    // Numbers/positions are basically arbitrary at this point. Will fix later.
    const windowWidth = window.innerWidth;
    const shapeSize = 300 * s;
    const xpos = x / 100 * windowWidth - shapeSize;
    const shapeBorder = 5 / s;
    const translation = 'translateX(' + xpos + 'px) translateY(' + y + 'px) scale(' + s + ')';
    const boxShadow = 'inset 0 0 0 ' + shapeBorder + 'px #ba367b, inset 0 0 25px rgba(0,0,0,0.4)';
    this.setState({shape: {'WebkitTransform': translation, 'MozTransform': translation, 'msTransform': translation, 'transform': translation, 'boxShadow': boxShadow}});
  }
  // adjustSides(x, y, s) {
  //   const windowHeight = window.innerHeight;
  //   const windowWidth = window.innerWidth;
  //   const sides = {
  //     left: {'right': windowWidth - x + 'px'},
  //     top: {'bottom': windowHeight - y + 'px'},
  //     right: {'left': x + 300 + 'px'},
  //     bottom: {'top': y + 300 + 'px'}
  //   };
  //   return sides;
  // }
  render() {
    const visibility = classnames('tut__overlay', {'hidden': this.props.hidden});
    return (
      <div className={visibility}>
        <div className="tut__shape" style={this.state.shape}></div>
        <div className="tut__screen tut__screen--left" style={this.state.sides.left}></div>
        <div className="tut__screen tut__screen--top" style={this.state.sides.top}></div>
        <div className="tut__screen tut__screen--right" style={this.state.sides.right}></div>
        <div className="tut__screen tut__screen--bottom" style={this.state.sides.bottom}></div>
      </div>
    );
  }

}

Tutorials.propTypes = {
  tutorials: React.PropTypes.object,
  x: React.PropTypes.number,
  y: React.PropTypes.number,
  s: React.PropTypes.number,
  hidden: React.PropTypes.bool
};