const React = require('react');
const ReactDOM = require('react-dom');
const LC = require('literallycanvas');


class MyApp extends React.Component{

  constructor(){
    super();
    this.state={
            isSetUp: true,
            svgText: "",
            lcOptions: {
                backgroundImage: null,
                toolbarPosition: 'bottom',
                snapshot: JSON.parse(localStorage.getItem('drawing')),
                onInit: this.onInit,
                imageURLPrefix:"/build/lc-assets/img"
    }
  }
}
 onInit(lc) {
      this.lc = lc;
      lc.on('drawingChange', this.save);
      lc.on('pan', this.save);
      lc.on('zoom', this.save);
      this.save();
  }

  save() {
    console.log('bum bum');
      localStorage.setItem('drawing', JSON.stringify(this.lc.getSnapshot()));
      this.setState({svgText: this.lc.getSVGString()});
  }

  actionOpenImage() {
    window.open(this.lc.getImage({
      // rect: {x: 0, y: 0, width: 100, height: 100}
      scale: 1, margin: {top: 10, right: 10, bottom: 10, left: 10}
    }).toDataURL());
  }

  actionChangeSize() {
      this.lc.setImageSize(null, 200)
  }

  actionSetUp() {
      this.setState({isSetUp: true});
  }

  actionTearDown() {
      this.setState({isSetUp: false});
  }

    render() {
        return <LC.LiterallyCanvasReactComponent  {...this.state.lcOptions} />;
    }
};


ReactDOM.render(<MyApp />, document.getElementById('main'));