/*
 * The code
 */

import { default as React } from 'react';
import { default as Draggable } from 'react-draggable';

let globalJSON;

class Image extends React.Component {

  render() {
    return (
      <Draggable>
        <div style={{...this.state.css, transform: `rotate(${this.state.angle}deg)`}} className="draggy sprite"/>
      </Draggable>
    );
  }
  rotate(forwards) {
    this.setState({
      angle: this.state.angle + (forwards ? 45 : -45)
    });
  }
  state = {
    css: {},
    angle: 0
  };

  constructor(props) {
    super(props);
    this.src = props.src;
    let elem = document.createElement('img');
    elem.addEventListener('load', () => {
      this.setState({
        css: {
          width: elem.width,
          height: elem.height,
          backgroundImage: `url("${globalJSON.images[this.src]}")`
        }
      });
    });
    elem.setAttribute('src', globalJSON.images[this.src]);
  }
}

class Scene extends React.Component {
  state = {
    bubbles: [],
    sprites: [],
    jsonSet: false,
    sceneWidth: 1,
    sceneHeight: 1
  };

  setJSON(event) {
    let jsonText = JSON.parse(event.target.value);
    globalJSON = {
      background: jsonText.background,
      images: jsonText.images
    };
    this.setState({
      jsonSet: true
    });
  }

  addNewImage(i) {
    return () => {
      this.setState(
        {
          sprites: this.state.sprites.concat([
            <Image src={i}/>
          ])
        }
      );
    };
  }

  undo() {
    this.setState({
        sprites: this.state.sprites.slice(0, this.state.sprites.length - 1)
      }
    );
  }

  rotate(forwards) {
    return () => {
      /*let ar = this.state.sprites.slice();
      ar[ar.length - 1].angle += (forwards ? 45 : -45);
      this.setState({sprites: ar});*/
      /*this.state.sprites[this.state.sprites.length - 1].setState({
        angle: this.state.sprites[this.state.sprites.length - 1].state.angle + (forwards ? 45 : -45)
      });*/
      this.state.sprites[this.state.sprites.length - 1].rotate(forwards);
    };
  }

  render() {
    if (this.state.jsonSet) {
      return (
        <div>
          <div className="box">
            <strong>SIZE:</strong>
            Horizontal:
            <button onClick={() => { this.setState({sceneWidth: this.state.sceneWidth + 1}); }}>+</button>
            <button onClick={() => { this.setState({sceneWidth: this.state.sceneWidth - 1}); }}>-</button>
            Vertical:
            <button onClick={() => { this.setState({sceneHeight: this.state.sceneHeight + 1}); }}>+</button>
            <button onClick={() => { this.setState({sceneHeight: this.state.sceneHeight - 1}); }}>-</button>
          </div>
          <div className="draggy" style={{
            backgroundImage: `url("${globalJSON.background.image}")`,
            width: (globalJSON.background.width * this.state.sceneWidth) + 'px',
            height: (globalJSON.background.height * this.state.sceneHeight) + 'px'
          }}>
          {this.state.sprites}
          </div>
          <div className="box">
            {globalJSON.images.map((image, i) =>
              <button onClick={::this.addNewImage(i)}>
                <img src={image}/>
              </button>
            )}
          </div>
          <div className="box">
            <strong>MOST RECENT SPRITE:</strong>
            <button onClick={::this.undo}>Undo</button>
            <button onClick={::this.rotate(true)}>Rotate 45 Degrees</button>
            <button onClick={::this.rotate(false)}>Rotate -45 Degrees</button>
          </div>
          <button onClick={() => {console.log(this.state); }}>GET STATE</button>
        </div>
      );
    } else {
      return (
        <div>
          <p>Paste your JSON here.</p>
          <textarea onChange={::this.setJSON}></textarea>
        </div>
      );
    }
  }
}

let sceneElement = React.createElement(Scene);

window.addEventListener('load', () => {
  React.render(sceneElement, document.getElementById('view'));
});

/*
 * Browser error
 */

TypeError: _this3.state.sprites[(_this3.state.sprites.length - 1)].rotate is not a function