2

import React from 'react'
import CanvasComponent from './canvasComponent'
import { ChromePicker } from 'react-color'
import {Rectangle, Circle, Ellipse, Line, Polyline, CornerBox, Triangle} from 'react-shapes';
const socket = io();

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      shapes: [],
      color: '#000000',
      startingData: null
    }
    socket.on('draw', (newDrawState) => this.handleStateChange(newDrawState));
    this.handleClick = this.handleClick.bind(this)
    this.handleColorChange = this.handleColorChange.bind(this)
    this.getLoad = this.getLoad.bind(this)
    this.sendLoad = this.sendLoad.bind(this)
    socket.on('geteverything', this.sendLoad)
    if (!(this.state.startingData)){
      socket.on('loadstuff', (data) => this.getLoad(data))
    }
  }
  componentWillMount() {
    let room = this.props.room;
    socket.on('connect', function() {
      socket.emit("subscribe", {room: room})
    })
    this.requestImage
  }
  handleStateChange(newDrawState) {
    let shapes = [...this.state.shapes, newDrawState]
    if (shapes.length > 40) {
      shapes = shapes.slice(-40, shapes.length)
    }
    this.setState({
      shapes
    })
  }
  sendLoad(){
    let canvas = document.getElementById('ourCanvas');
    let imgData = canvas.toDataURL()
    socket.emit('loadstuff', imgData)
    this.setState({startingData: imgData })
  }
  getLoad(imgData){
    this.setState({
      startingData: imgData
    })
    let loadedImage = new Image()
    loadedImage.src = this.state.startingData
    let canvas = document.getElementById('ourCanvas');
    let ctx = canvas.getContext('2d');
    ctx.drawImage(loadedImage, 0, 0) 
  } 
  handleClick(ev){
    ev.preventDefault();
    socket.emit('draw', [ev.pageX, ev.pageY-75, this.state.color]);
    let shapes = [...this.state.shapes, [ev.pageX, ev.pageY-75]]

    this.setState({
      shapes
    })
  }
  handleColorChange(color, event) {
    this.setState({
      color: color.hex
    })
  }
  render () {
    return (
      <div>
        <h1>You are in room {this.props.room}</h1>
        <CanvasComponent onMove={this.handleClick} shapes={this.state.shapes} />
        <ChromePicker color={this.state.color} onChange={this.handleColorChange} />
        <Rectangle width={40} height={40} fill={{color:'none'}} stroke={{color: this.state.color}} strokeWidth={2} />
        <Circle r={20} fill={{color:'none'}} stroke={{color:this.state.color}} strokeWidth={2} />
        <Ellipse rx={300} ry={100} fill={{color:'none'}} stroke={{color:'#E65243'}} strokeWidth={3} />
        <Line x1={25} x2={35} y1={25} y2={35}  stroke={{color:'#E65243'}} strokeWidth={3} />
        <Polyline points='25,25 25,350 500,350 500,500 305,250 20,15' fill={{color:'#2409ba'}} stroke={{color:'#E65243'}} strokeWidth={3} />
        <CornerBox size={400} width={150} orientation='topLeft' fill={{color:'#2409ba'}} stroke={{color:'#E65243'}}strokeWidth={3} />
        <Triangle width={150} height={150} fill={{color:'#2409ba'}} stroke={{color:'#E65243'}} strokeWidth={3} />
      </div>
    )
  }
}