import React from "react";
import {
  StageComponent, BitmapComponent, ContainerComponent, ShapeComponent, TextComponent
} from "easeljs-react";
import Graphics = createjs.Graphics;
import Stage = createjs.Stage;
import Container = createjs.Container;
class CanvasComponent extends React.Component {
  stage;
  textContainer;
  constructor(props) {
    super(props);
    state = {
      image: null,
      bitmapX: 100,
      bitmapY: 100,
      graphics: new Graphics(),
      text: "hello world!"
    };
    // Note: make reference setters and event handlers idendified.
    // avoid passing anonymous function props to Component.
    this.onMouseDown = ev => this.handleMouseDown(ev);
    this.onPressUp   = ev => this.handlePressUp(ev);
    this.setStageRef = n => this.stage = n.stage;
    this.setTextContainerRef = n => this.textContainer = n;
  }
  handleMouseDown(ev) {
    console.log(`down: ${ev.stageX},${ev.stageY}`);
  }
  handlePressUp(ev) {
    console.log(`up: ${ev.stageX},${ev.stageY}`);
  }
  componentDidMount() {
    const image = new Image();
    image.src = "/img/logo.png";  
    image.onload = () => {
      this.setState({image});            
    }
  }
 
  render() {
      return (
          <StageComponent
              autoClear={true}              
              width={1024} height={768}
              ref={this.setStageRef}>
              <BitmapComponent image={this.state.image}
                               x={this.state.bitmapX}
                               y={this.state.bitmapY}
                               onMouseDown={this.onMouseDown}
                               onPressUp={this.onPressUp} />
              <ShapeComponent graphics={this.state.graphics}
                              bounds={new Rectangle(0,0,100,100)}/>
              <ContainerComponent
                x={100} y={200} ref={this.setTextContainerRef} >
                  <TextComponent
                      font={"20pt Arial"}
                      color={"white"}
                      text={this.state.text}/>
              </ContainerComponent>
          </StageComponent>
      )
  }
}

class CanvasComponent extends React.Component {
  stage: Stage;
  shape: Shape;
  setStageRef = n => this.stage = n.stage;
  setShapeRef = n => this.shape = n.getPublicInstance();
  render() {
    <StageComponent
        width={640} height={480} ref={this.setStageRef}>
        <ShapeComponent ref={this.setShapeRef} />                       
    </StageComponent>
  }
}